How to add an object in the array of objects in react js

Question

I am new to the react . Here , what I have tried.

onaddRow(e, id) {
        const addData = this.props.lowData;
        const tempObj = {
            id: 'L1',
            technologyId: 0,
            technology: '',
            type: '',
            numberOfQuestions: ''
        }
        addData.push(tempObj);
    }

this.props.lowData is an array of the objects . So, I want to add an object in this .

So, I tried the following way but it was not working , can any one suggest me how can I do this ?

Your example looks like you want to add to the addData object but in your question you say you want to add to this.props.lowData; which do you want to add to? — broccoli_rob
– broccoli_rob, Commented Sep 26, 2018 at 13:24
Did you check if onaddRow() was properly called? Because the function body looks okay to me. — Reynicke
– Reynicke, Commented Sep 26, 2018 at 13:27

Amruth · Accepted Answer · 2018-09-27 04:35:00Z

1

You can get updated array usign (spread) ... also.

onaddRow(e, id) {  
    const tempObj = {
        id: 'L1',
        technologyId: 0,
        technology: '',
        type: '',
        numberOfQuestions: ''
    }
    const addData = [...this.props.lowData, tempObj ];
    console.log(addData)
}

//as you asked in comment. if you want to remove item from array you can do like this.

let updatedArrray = yourArray.filter(i => {
  return i.id != passYourIdHere;
});
console.log(updatedArrray);

so here we are returning all other object's except matching one, finally collecting in updatedArrray.

edited Sep 27, 2018 at 4:35

answered Sep 26, 2018 at 13:28

Amruth

5,9122 gold badges30 silver badges41 bronze badges

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

3 Comments

ganesh kaspate Over a year ago

Hi, your answer is perfect. Thanks for this. If you dont have any prob then can you tell me How can I now remove the element from that same if using Id I mean I know Id so if it matches the ID then remove that elemen.

Amruth Over a year ago

have u understood deleting part ?

ganesh kaspate Over a year ago

Yes I understood that

Xavi Bonell · Accepted Answer · 2018-09-26 13:27:16Z

0

By using addData.push() you are effectively adding the object into the array (if props.lowData is indeed an array of objects), but given that you are on a React environment you should do afterward this.setState({lowData:addData}) in order to trigger the rerendering of the component.

answered Sep 26, 2018 at 13:27

Xavi Bonell

911 silver badge9 bronze badges

Comments

Amruth · Accepted Answer · 2018-09-27 04:33:35Z

0

React uses one-way data flow (from parent to children). In your example you received data from parent in props. For adding new object you must pass callback from parent which will add it to the parent state.

Child component:
onAddRow(e, id) {  
    const tempObj = {
        id: 'L1',
        technologyId: 0,
        technology: '',
        type: '',
        numberOfQuestions: ''
    }
    this.props.onAddRow(tempObj)
}

Parent:

onAddRow = (newObj) => {
 this.setState({
   lowData: [...this.state.lowData, newObj]
 })
}
render() {

<ChildComponent data={this.state.lowData} onAddRow={this.onAddRow} />

}

edited Sep 27, 2018 at 4:33

Amruth

5,9122 gold badges30 silver badges41 bronze badges

answered Sep 26, 2018 at 13:42

Igor S

9698 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to add an object in the array of objects in react js

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related