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: stackoverflow.com/questions/171251/… or stackoverflow.com/questions/40601834/… — Janick Fischer
– Janick Fischer, Commented Mar 23, 2018 at 12:55

Andrii Starusiev · Accepted Answer · 2018-03-23 13:01:32Z

1

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

answered Mar 23, 2018 at 13:01

Andrii Starusiev

7,7942 gold badges31 silver badges40 bronze badges

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

Comments

trixn · Accepted Answer · 2018-03-23 13:35:16Z

0

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
}

answered Mar 23, 2018 at 13:35

trixn

16.4k2 gold badges40 silver badges59 bronze badges

Comments

Dkhili amine · Accepted Answer · 2018-03-23 13:45:23Z

0

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

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

answered Mar 23, 2018 at 13:45

Dkhili amine

1695 bronze badges

Collectives™ on Stack Overflow

How to add a object to state of react component?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related