ReactJS: add a new input field on an option select

Question

I'm using react-select with isMulti. I am trying to add a new input field when user selects an option from dropdown. I have somehow achieved it. I am facing a problem, let's say if I select 1st option from dropdown then it adds the input field for that particular option and when I try to select second option then 2 new input fields are added (1 for the previously selected option and the other for current selected option). In this way, I get 3 new input fields but I should be getting 2 input fields because I have selected only 2 options. Below is my code.

 onChange = (e) => {
   if(e){
     e.map((item) => {
     this.state.selectValue.push(item.value);  
    })
  }
}

this.state.selectValue.map((item) => {
  return(
    <div className="row m-3">
      <label className="col-md-4">{item}</label>
      <div className="col-md-7">
        <input type="text" name={item} className="form-control"  />
      </div>
    </div>
   )                                                    
})


 <Select
    isMulti
    options={this.state.options}
    onChange = {(e) => this.onChange(e)}
    classNamePrefix="select"
 />

Note: I am storing the option's value as a "name" of input field to keep track of the quantity.

In the screenshot when I selected first then an input field with "first" label was displayed but when I selected "second" then 2 input fields showed up as highlighed in the image.

Hyetigran · Accepted Answer · 2020-07-01 18:48:42Z

2

Updating state within a loop causes sideffects with the way the component re-renders. Try using a temporary array in your handler and then override state after your map function.

 onChange = (e) => {
   if(e){
     let arr = []
     e.map((item) => {
     arr.push(item.value);  
    })
    this.setState({selectValue: arr})
  }
}

answered Jul 1, 2020 at 18:48

Hyetigran

1,2253 gold badges15 silver badges32 bronze badges

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

Comments

Pierre Mvogo · Accepted Answer · 2022-06-18 17:44:16Z

0

Updating state within a loop causes sideffects with the way the component re-renders. Try using a temporary array in your handler and then override state after your map function.

answered Jun 18, 2022 at 17:44

Pierre Mvogo

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

ReactJS: add a new input field on an option select

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related