How can I selectively delete dynamically added input fields in React?

Question

I am able to add input fields and get the state of said fields. I am also adding a delete button along with each new field but have not been able to get the delete function to work.

I am creating the delete button here along with the input field.

class InputField extends React.Component {
render() {
  const { name, onChange } = this.props;
  return (
    <div className="row">
      <div className="input-field col s12">
        <label htmlFor={name}>OBR3</label>
        <input id={name}
               type="text"
               className=""
               value={this.props.inputValues}
               onChange={onChange} />

               <button type='delete' value='Delete' 
                                     onClick={this.props.handleRemove}>
                 <i className="material-icons">remove</i>
               </button>
      </div>
    </div>
   )
}
}

export class OBR3 extends React.Component {
...

this.state = {
  inputValues: {},
  inputs: []
 ...

handleRemove (item, event) {
const newState = this.state.newState
if (newState.indexOf(item) > 1) {
  newState.splice(newState.indexOf(item), 1)
}
this.setState({ inputs: newState })
console.log(newState.indexOf(item))
}

handleChange (name, event) {
let inputValues = this.state.inputValues
inputValues[name] = event.target.value
this.setState({ inputValues })
  }

This function actually adds the input field and let's me .bind(this) . Not sure but I think If I was able to add the delete button here It might solve my issue?

  handleAddInput() {
  const name = `OBR3-${(this.state.inputs).length}`;

  let inputBox = <InputField key={this.state.inputs.length}
                             name={name}
                             onChange={this.handleChange.bind(this, name)} />

  const inputs = this.state.inputs
  inputs.push( inputBox );
  this.setState({ inputs });
  }

And finally this is how I am now rendering everything.

 render() {
 return (
  <div>
    <p id='OBR3'>OBR3</p>
    <button type='submit' value='Submit' 
                          onClick={this.handleAddInput.bind(this)}>
      <i className="material-icons">add</i>
    </button>
    {this.state.inputs}
  </div>
...

Andrii Starusiev · Accepted Answer · 2017-08-02 01:13:00Z

1

First: send input index as prop to the input

handleAddInput(e) {
    const inputList = this.state.inputList

    this.setState({
        inputList: inputList.concat(<InputField key={inputList.length}
                                                className="mdl-textfield__input"
                                                type="text"
                                                id="OBR3"
                                                inputIndex={inputList.length} //this one
                                                value={this.props.value}
                                                onChange={this.props.callback}
        />)
    })
    e.preventDefault()
}

Second: Send in call back event.target.value (or just event) and index of input:

<input className="mdl-textfield__input" 
    type="text" id="OBR3" 
    value={this.props.value} 
    onChange={(e) => this.props.callback(this.props.inputIndex, e.target.value)} />

Third: In parent:

handleOBR3OnChange(inputIndex, value) {
    console.log(inputIndex, value) //you know, what input is changed and know the value 
    ...
}

answered Aug 2, 2017 at 1:13

Andrii Starusiev

7,7842 gold badges31 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

OsoGrizz Over a year ago

With these changes I am able to see the state of inputIndex in the child component. However I am not able to get the value, and the state is not hoisted up to the parent component. I may simply not be fully understanding this solution, but so far it looks I am in the same position as before.

Andrii Starusiev Over a year ago

I thought handleOBR3OnChange in the parent component, isn't it?

Collectives™ on Stack Overflow

How can I selectively delete dynamically added input fields in React?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related