Setting states of array element in React

Question

I have this simple form and I am having a hard time in changing and getting the state of this one array.

The state is set

this.state = {
            .....
        treatment:              [],
         .....
    }

On change

onChange= (e) => {
    this.setState({
        [e.target.name]: e.target.value,
        error: ''
    })
}

The array element is called on click in form with one array element in it Click Here to add Treatment

On clicking the button the JS kicks in

$(document).ready(function (){
$('#addHidden').click(function(){
    var addtext = $('.hidden_box').html();
        $('#addHiddenBox').append(addtext);
});

$("#addHiddenBox").on("click", ".removeText", function () {
    $(this).closest(".boxAdded").remove();
});

});

and brings in this hidden element

 <div className="hide hidden_box">           
      <div className="treatments col-sm-6 boxAdded">             
           <div className="form-group">
             <input className="form-control" type="text" placeholder="Treatment" name="treatment[]" value={this.state.treatment} onChange={this.onChange}/>
             <button className="btn btn-danger removeText" type="button"><i className="fa fa-times" aria-hidden="true"></i></button>
           </div>
        </div>
 </div>

Iam not able to set the state of treatment[] here. The states are coming blank.

can you check once what the value of e.target.name and e.target.value is when onChange is triggered. Maybe use console.log debugging — Anuradha Kumari
– Anuradha Kumari, Commented Sep 20, 2019 at 13:48
Iam getting this on form submit {name: "Amit Khare", title: "BEST TREKKING PLACES IN INDIA", short_summary: "aaaaaa", about_you: "bbbbbbb", specialisation: "ccccc", …} about_you: "bbbbbbb" city: "Gurgaon" country: "India" education: "ffffffff" error: "" name: "Amit Khare" profile_pic: "C:\fakepath\blog-1.jpg" short_summary: "aaaaaa" specialisation: "ccccc" state: "Haryana" street: "1760, Gurgaon" title: "BEST TREKKING PLACES IN INDIA" treatment: [] } — Amit Khare
– Amit Khare, Commented Sep 20, 2019 at 13:52
can you try below code.The console log should tell you what is being set in the state and then you can proceed accordingly. Also, first change the name of the input element to treatment and not treatment[], and then try below debugging. ``` onChange= (e) => { console.log('name', e.target.name); console.log('value', e.target.value); this.setState({ [e.target.name]: e.target.value, error: '' }) } ``` — Anuradha Kumari
– Anuradha Kumari, Commented Sep 20, 2019 at 14:02
Same result.. blank array.. setState is not working here i think.... I changed the initial value to ['a', 'b'] and it returns <input class="form-control" type="text" placeholder="Treatment" name="treatment" value="a,b"> in html — Amit Khare
– Amit Khare, Commented Sep 20, 2019 at 14:18

Ahmad · Accepted Answer · 2019-09-20 12:58:19Z

1

e.target.name in your case will return "treatment[]". Notice the square brackets.

Change it to this:

<input className="form-control" type="text" placeholder="Treatment" name="treatment" value={this.state.treatment} onChange={this.onChange}/>

answered Sep 20, 2019 at 12:58

Ahmad

73k18 gold badges116 silver badges139 bronze badges

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

1 Comment

Amit Khare Over a year ago

Still the state coming blank

Amit Khare · Accepted Answer · 2019-09-21 06:03:19Z

Finally I solved this

the JSX looks like

<div className="form-group">
    <button className="btn btn-success" id="addHidden" type="button" onClick={(e)=>this.addTreatment(e)}><i className="glyphicon glyphicon-plus"></i> Click Here to add Treatment</button>
      <div id="addHiddenBox" className="row">
{
    this.state.treatment.map((treatment, index) =>{
       return(        
         <div className="treatments col-sm-6 boxAdded" key={index}>             
          <div className="form-group">
           <input className="form-control" type="text" placeholder="Treatment" name="treatment" value={treatment} onChange={(e)=>this.arrayChange(e, index)}  />
           <button className="btn btn-danger removeText" type="button" onClick={()=>this.arrayRemove(index)}><i className="fa fa-times" aria-hidden="true"></i></button>
          </div>
         </div>
      )
   })
}
 </div>
</div>

The functions are:

this.state = {
        ...........
        treatment:              [],
        ..........
    }

addTreatment(){
    this.setState({treatment: [...this.state.treatment, ""]})
}

arrayChange(e, index){
    this.state.treatment[index] = e.target.value
    this.setState({treatment: this.state.treatment})
}

arrayRemove(index){
    this.state.treatment.splice(index, 1)
    this.setState({treatment: this.state.treatment})
}

Collectives™ on Stack Overflow

Setting states of array element in React

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related