/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

2 votes62 views1 answer
Make props optional react typescript
TypeScript
1 vote99 views1 answer
The Angular CLI process did not start listening for requests within the timeout period of 0 seconds.
TypeScript
0 vote104 views1 answer
The react-scripts package provided by Create React App requires a dependency: [1] [1] "webpack": "4.42.0"
TypeScript
-1 vote113 views2 answers
ERROR in node_modules/@ng-bootstrap/ng-bootstrap/accordion/accordion.d.ts:230:9 - error TS1086: An accessor cannot be declared in an ambient context. 230 set ngbPanelToggle(panel: NgbPanel);
TypeScript
2 votes101 views1 answer
C program to find sum of array elements using recursion
TypeScript
0 vote108 views1 answer
Must_not exists elastic search
TypeScript
0 vote110 views1 answer
Regex exec returns null
TypeScript
21 votes109 views6 answers
Map to object
TypeScript
0 vote104 views1 answer
Filter by list of Ids
TypeScript
52 votes269 views4 answers
Used ports in linux
TypeScript