React dynamic input's event.target.value of undefined

Question

I am creating dynamic input fields by click "add" button. All new input will be saved in an array of object. Those are only snippet of code. There is the original repo.

This is Section.js

       constructor() {
            super();
            this.state = {
              name: '',
              subsection: [
                  {
                    subname: ''
                  }
                ]
            };
          }
        handleOnChange(e, idx) {
            const subsection = this.state.subsection;
            subsection[idx].subname = e.target.value;
            this.forceUpdate();
          }

  addNewSubsection() {
    this.setState({
        subsection: this.state.subsection.concat([{ subname: '' }])
    });
  }`

And this is Subsection.js which include input:

    renderSubsection() {
    const { subsection, handleOnChange } = this.props;
    return subsection.map((sub, idx) => {
      return (
        <Row key={idx}>
          <h5>Name:</h5>
          <Input
            s={12}
            onChange={() => handleOnChange(idx)}
            value={sub.subname}
          />
          <h5>Video album <Icon>clear</Icon></h5>
          <a href='#' s={12}><Icon large>attach_file</Icon></a>
          <Input s={12}type='radio' value='add_to_trial' label="included in trial" />
        </Row>
      );
    });
  }

Answer 1

The input element in the Subsection component is only passing along the index, not the event. Try this:

      <Input
        s={12}
        onChange={event => handleOnChange(event, idx)}
        value={sub.subname}
      />