How to add a object to state of react component?

Question

I have object={x:[],y:[],z:[]} got from Api and passed it as prop from <Acomponent/> to child <Bcomponent/> like <Acomponent data={object}/>.

<Bcomponent/> state is {a:[],b:[],c:[]} I want data props from <Acomponent> to be added to state of <Bcomponent/>

(i.e) final state of <Bcomponent/> has to be

{a:[],b:[],c:[],x:[],y:[],z:[]}

How it can be done?

Possible duplicate: https://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically or https://stackoverflow.com/questions/40601834/deep-merge-of-complex-state-in-react — Janick Fischer, Mar 23 '18 at 12:55

score 1 · Accepted Answer · answered Mar 23 '18 at 13:01

Just use constructor

class Bcomponent extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                a: [],
                b: [],
                c: [],
                x: props.data.x,
                y: props.data.y,
                z: props.data.z
            }
        }
        ...
    }

or setState in componentWillReceiveProps

score 0 · Answer 2 · answered Mar 23 '18 at 13:35

You can use the object spread syntax to merge objects:

class Bcomponent extends React.Component {
    constructor(props) {
        super(props);

        const {data} = props;

        this.state = {
            a: [],
            b: [],
            c: [],
            ...data,
        }
    }

    // ...other functions
}

score 0 · Answer 3 · answered Mar 23 '18 at 13:45

0

state = {
 a: [], b: [], c: [], ...this.props.data
};

Demo https://codesandbox.io/s/q30w3q97r9

answered Mar 23 '18 at 13:45

Dkhili amine

169
5

How to add a object to state of react component?

3 Answers3