/TypeScript/React dynamic inputs with id

React dynamic inputs with id

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

function DynamicInput() {

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

      function createInputs() {
        return values.val.map((el, i) =>
          <div key={i}>
            <input type="text" value={el||''} onChange={handleChange.bind(i)} />
            <input type='button' value='remove' onClick={removeClick.bind(i)} />
          </div>
        );
      }

    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 (
      <form onSubmit={handleSubmit}>
          {createInputs()}
          <input type='button' value='add more' onClick={addClick} />
          <input type="submit" value="Submit" />
      </form>
    );

}

export default DynamicInput;

Source: stackoverflow.com

Similar codes

1 vote154 views1 answer
Drop index if exists mysql
TypeScript
0 vote135 views1 answer
Give each of the radio and checkbox inputs the value attribute. Use the input label text, in lowercase, as the value for the attribute.
TypeScript
0 vote142 views1 answer
How to do Email validation using Regular expression in Typescript
TypeScript
38 votes191 views2 answers
\Activate.ps1 cannot be loaded because running scripts is disabled on this system. For more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170
TypeScript
0 vote156 views1 answer
Edit lights in a room alexa
TypeScript
45 votes194 views5 answers
Cra typescript
TypeScript
0 vote145 views1 answer
How to use aspects in spring boot
TypeScript
0 vote157 views1 answer
Python discord action when someone reacts to message
TypeScript
1 vote215 views2 answers
Docker An attempt was made to access a socket in a way forbidden by its access permissions.
TypeScript
1 vote157 views1 answer
What does a test have
TypeScript