Add or Remove Input Fields Dynamically With React JS ✅ [ React Dynamic Forms From JSON Array ]

In this video we have discussed how to add and remove input fields dynamically on click of button.

In this next video we have discussed how to type in multiple inputs .

Check the code and video below :

In the App.js file 

import { useState } from "react";

function App() {

  const [hobby, setHobby] = useState([''])

  return (

    <div>

      Hobbies :

      <button

        onClick={() => {

          setHobby([...hobby, ''])

        }}

      >

        ADD HOBBY

      </button>

      {

        hobby.map((item, index) => {

          return <div style={{ display: 'flex' }}>

            <input value={item} />

            <button

              onClick={() => {

                const newarr = hobby.filter((i, j) => {

                  return index !== j

                })

                console.log(newarr)

                setHobby(newarr)

              }}

            >

              DELETE

            </button>

          </div>

        })

      }

    </div>

  );

}

export default App;

Youtube Channel Saifi Code  :

Video below :  PART 1

PART 2 of the video : for PART 2 Code check the video description on youtube