/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

0 vote160 views2 answers
Add redux to react typescript
TypeScript
0 vote190 views1 answer
OpenCV(4.5.3) C:\Users\runneradmin\AppData\Local\Temp\pip-req-build-q3d_8t8e\opencv\modules\imgproc\src\shapedescr.cpp:315: error: (-215:Assertion failed) npoints >= 0 && (depth == CV_32F || depth == CV_32S) in function 'cv::contourArea'
TypeScript
0 vote166 views1 answer
Install typescript mac
TypeScript
3 votes169 views2 answers
Angular onclick toggle class
TypeScript
5 votes126 views3 answers
Angular unsubscribe from observable
TypeScript
0 vote164 views1 answer
Number of vibrations per second is called
TypeScript
0 vote210 views1 answer
Supertest typescript
TypeScript
0 vote172 views1 answer
How to ignore a field while desiarilizing in java if its type is not wrong
TypeScript
114 votes250 views3 answers
How to check whether file exists in python
TypeScript
0 vote165 views1 answer
Calling funcionts in bash
TypeScript