Trying to bind data to state with input field that's being mapped in React

Question

Im trying to bind my state values to the input values using a onChange function

  handleChange = event => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

but my Input fields are inside of a map and I don't know how to give the input field specific name and value attribute for each iteration so the onChange function will work

Current Code:

state = {
    row0: "",
    row1: "",
    row2: "",
    row3: "",
    row4: ""
  };

  handleChange = event => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  handleSubmit = event => {
    console.log(this.state);
  };

  render() {
    const {
      row,
      editMode,
      index,
      selectedIdx,
      startEditing,
      stopEditing
    } = this.props;
    const rowLen = row.length;

    return (
      <React.Fragment>
        {row.map((eachRow, i) => {
          if (rowLen === i + 1) {
            return (
              <React.Fragment key={i}>
                {editMode === true && index === selectedIdx ? (
                  <TableCell align="right">
                    <Input className="input_key" name={`row${i}`} />
                    <IconButton
                      onClick={this.handleSubmit}
                      className="ml-4"
                      aria-label="Filter list"
                    >
                      <i className="fas fa-check" />
                    </IconButton>
                  </TableCell>
                ) : (
                  <TableCell key={i} align="right">
                    {eachRow}
                    <IconButton
                      onClick={startEditing}
                      className="ml-4"
                      aria-label="Filter list"
                    >
                      <i className="fas fa-pen" />
                    </IconButton>
                  </TableCell>
                )}
              </React.Fragment>
            );
          } else {
            return (
              <React.Fragment key={i}>
                {editMode === true && index === selectedIdx ? (
                  <TableCell>
                    <Input className="input_key" />
                  </TableCell>
                ) : (
                  <TableCell> {eachRow} </TableCell>
                )}
              </React.Fragment>
            );
          }
        })}
      </React.Fragment>
    );
  }
}

I tried template literal to possible store the input values in the state but got returned error but I believe this isn't working since state is object and i'm trying add a string to object.

<Input
className="input_key"
name={`row${i}`}
value={this.state + `${i}`}
onChange={this.handleChange}
/>

so tried creating a function to filter out the key to match it but I don't think that the right way about going about it.

  const daState = Object.keys(this.state).filter(state => {
        return state === `row${i}`;
      }); 

I need to figure out how to get [event.target.name]: event.target.value so that data will bind to the state maybe there's a different approach to binding the values to the state anything will help, thank you.

Also any side note on improving syntax will be greatly appreciated

Answer 1

Have a look here

Reactjs setState() with a dynamic key name?

inputChangeHandler: function (event) {
  var stateObject = function () {
    returnObj = {};
    returnObj[this.target.id] = this.target.value;
    
    return returnObj;
  }.bind(event)();

  this.setState(stateObject);
}