How to implement a dynamic form with controlled components in ReactJS?

Question

As I am looking at the examples in the reference for controlled form components in react.js official website, I am wondering how is one supposed to implement a

Answer 1

How adding/removing input elements dynamically with functional components?

The same component from the selected answer reviewed and rewrited as a functional component.

import React from 'react';
import { useState } from 'react';

function DynamicInput() {

    const [values, setValues] = useState({ val: []});

      function createInputs() {
        return values.val.map((el, i) =>
          

            
            
          
        );
      }

    function handleChange(event) {
      let vals = [...values.val];
      vals[this] = event.target.value;
      setValues({ val: vals });
    }

    const addClick = () => {
      setValues({ val: [...values.val, '']})
    }

    const removeClick = () => {
      let vals = [...values.val];
      vals.splice(this,1);
      setValues({ val: vals });
    }

    const handleSubmit = event => {
      alert('A name was submitted: ' + values.val.join(', '));
      event.preventDefault();
    }

    return (
      

          {createInputs()}
          
          
      
    );

}

export default DynamicInput;