React Js Render Data to Form | Two way Binding

    const { useState } = React;

    const data = {

      seo_title: 'React Js',

      seo_description: 'React Js is a frontend framework',

      top_desc: 'Heading 1',

      code: 'Code',

      bottom_desc: 'This is Bottom Desc'

    };

    function App() {

      // Create a state variable for all input values as an object

      const [formValues, setFormValues] = useState(data);

​

      // Handler function to update the form values

      const handleChange = (event) => {

        const { name, value } = event.target;

        setFormValues((prevValues) => ({ ...prevValues, [name]: value }));

​

      };

      const save = () =>{

         console.log(formValues)

      }

​

      return (

        <div className="container">

          <h3>React Js Render Data to Form | Two way Binding</h3>

          {/* Input field for 'seo_title' */}

          <div>

            <label htmlFor="seo_title">SEO Title</label>

            <input

              type="text"

              id="seo_title"

              name="seo_title"

              value={formValues.seo_title}

              onChange={handleChange}

            />

          </div>

​

          {/* Input field for 'seo_description' */}

          <div>

            <label htmlFor="seo_description">SEO Description</label>

            <input

              type="text"

              id="seo_description"

              name="seo_description"

              value={formValues.seo_description}

              onChange={handleChange}

            />

          </div>

​

          {/* Input field for 'top_desc' */}

          <div>

            <label htmlFor="top_desc">Top Description</label>

            <input

              type="text"

              id="top_desc"

              name="top_desc"

              value={formValues.top_desc}

              onChange={handleChange}

            />

          </div>

​

          {/* Input field for 'code' */}

          <div>

            <label htmlFor="code">Code</label>

            <input

              type="text"

              id="code"

              name="code"

              value={formValues.code}

              onChange={handleChange}

            />

          </div>

​

          {/* Input field for 'bottom_desc' */}

          <div>

            <label htmlFor="bottom_desc">Bottom Description</label>

            <input

              type="text"

              id="bottom_desc"

              name="bottom_desc"

              value={formValues.bottom_desc}

              onChange={handleChange}

            />

          </div>

​

          {/* Add more input fields for other data properties if needed */}

​

          <button type="submit" onClick={save}>Submit</button>

        </div>

      );

​

    }

​

    ReactDOM.render(<App />, document.getElementById("app"));

  </script>