How to fill form with select option data?-CodePudding

I need to select option that contains form data in a json format to fill form with onChange event. here is an html example:

<select>
     <option value='{"firstname":"test","lastname":"test","tel":"test"}'>Irakli</option>
</select>
<form>
     <input name="firstname"/>
     <input name="lastname"/>
     <input name="tel"/>
</form>

CodePudding user response：

You can use useRef hook to access DOM and update values like this:

import { useRef } from "react";

export default function App() {
  const firstnameRef = useRef();
  const lastnameRef = useRef();
  const telRef = useRef();

  const handleOnChange = (e) => {
    const currentValue = e.target.value;
    if (currentValue) {
      const currentObject = JSON.parse(currentValue);
      firstnameRef.current.value = currentObject.firstname;
      lastnameRef.current.value = currentObject.lastname;
      telRef.current.value = currentObject.tel;
    } else {
      firstnameRef.current.value = "";
      lastnameRef.current.value = "";
      telRef.current.value = "";
    }
  };

  return (
    <div>
      <select onChange={handleOnChange}>
        <option value="">please select</option>
        <option value='{"firstname":"test","lastname":"test","tel":"test"}'>
          Irakli
        </option>
        <option value='{"firstname":"name2","lastname":"lastname2","tel":"tel2"}'>
          Option2
        </option>
        <option value='{"firstname":"name3","lastname":"lastname3","tel":"tel3"}'>
          Option3
        </option>
      </select>
      <form>
        <input ref={firstnameRef} name="firstname" />
        <input ref={lastnameRef} name="lastname" />
        <input ref={telRef} name="tel" />
      </form>
    </div>
  );
}

You can take a look at this sandbox for a live working example of this solution.

CodePudding user response：

you can have an initial state as your json, and then with event handlers parsing the value you can set to form accordingly ...

sample e.g.

// Get a hook function
const {useState} = React;

const App = () => {
    const [formVal, setFormVal] = useState({"firstname":"","lastname":"","tel":""});
  
    const handleSelectChange = (e) => {
       const {value} = e.target;
       const parsed = JSON.parse(value);
       setFormVal(parsed);
    }
    
    const handleInputChange = (e) => {
       const {value, name} = e.target;
       setFormVal(prev=> ({...prev, [name] : value}) )
    }
    
    return (
       <div>
        <select onChange={handleSelectChange}>
          <option value='{"firstname":"","lastname":"","tel":""}'>Select</option>
          <option value='{"firstname":"test","lastname":"test","tel":"test"}'>Irakli</option>
        </select>
        <br></br>
        <form>
             <label>First Name: <input value={formVal.firstname} onChange={handleInputChange} name="firstname"/></label><br></br>
             <label>Last Name: <input value={formVal.lastname} onChange={handleInputChange} name="lastname"/></label><br></br>
             <label>Tel: <input value={formVal.tel} onChange={handleInputChange} name="tel"/></label>
        </form>
       </div>  
    );
};

// Render it
ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App/>
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>