setState in react it seems that it delete all state content

Question

I wrote an object style and I was calling it in style of any element. It was cool tell i wanted to edit one style value of some element, so I tried to change it like

onClick={{cardStyle.li.backgroundColor : "black }}

But that gave me a read only error, so I put the cardStyle object in state in order using setState, and now when i try to change anyvalue using setState, it seems that it only puts that value and deleted everything from it

This is the code:

    import React from "react";
    
    
    export default class CardInfo extends React.Component
    {
        constructor(props){
            super(props);
    
            this.state = { cardStyle : {
                ul : {
                    width         : '80%',
                    margin        : '5% 10%',
                    listStyleType : "none", 
                },
                li :{
                    width         :  "30%",
                    border        : " 4px solid rgb(0, 0, 0 , 0.6) ",
                    borderRadius  : "7%",
                    textAlign     : "center",
                    paddingTop    : "3%",
                    marginRight   : '1%',
                    float         : 'left',
                    backgroundColor : this.props.Fname === "MUHAMMAD"  ? "rgb(255, 10, 92 , .7)" : "white",
                },
                img : {
                    width : " 80%",
                    borderRadius  : "7%",
                    
                },
                on : {backgroundColor : "black"}
            }}
        }
        render()
        { 
            
        
            
            return <ul  style={this.state.cardStyle.ul}>
                     <li style={this.state.cardStyle.li} 
                                onClick={() =>this.setState({cardStyle:{li:{backgroundColor : "grey"}}})} >
                        <img style={this.state.cardStyle.img} src={this.props.img} alt="lilpic" />
                        <h2>{this.props.Fname}</h2>
                        <p>{this.props.quetes}</p>
                        <p>{this.props.phone}</p>
                     </li>
    
                </ul>
    
        
        }
    }

Your `setState` call overwrites everything. What you put in there as `cardStyle:` becomes the new `this.state.cardStyle`. If you want to update just one property you need to compose the new state by merging the current state and the new property. The basic idea is `this.setState({ cardStyle: { ...this.state.cardStyle, li: { ... } })` — , Sep 13 '21 at 23:18
Duplicate: [How to update nested state properties in React](https://stackoverflow.com/questions/43040721/how-to-update-nested-state-properties-in-react) — , Sep 13 '21 at 23:20

score 1 · Answer 1 · answered Sep 13 '21 at 23:25

1

You are changing state and overriding it with new values, instead you should override the property you want and give rest of the properties as well. So replace your on click this.setState with

this.setState({cardStyle:{ ...this.state.cardStyle, li:{backgroundColor : "grey"}}})} >

answered Sep 13 '21 at 23:25

Sulman Azhar

977
1
9
26

thank u for the answer , but i didnt understand what are the { ... } for . – muhammad Sep 14 '21 at 01:07
it is now deleting all the values of li only – muhammad Sep 14 '21 at 01:19
Create a codesandbox for this so i can verify – Sulman Azhar Sep 14 '21 at 05:37
try this tho ```this.setState({cardStyle:{ ...this.state.cardStyle, li:{...this.state.cardStyle.li, backgroundColor : "grey"}}})} > ``` – Sulman Azhar Sep 14 '21 at 05:40
{...} means that you are giving all of the other properties of the object. If you have an object like this ```let someObj = {prop1 : '', prop2: ''}``` then if you want to assign some value to ```prop1``` then you will do something like this ```someObj.prop1 = 'some value'``` . Now in your are you have an state object and if you do something like this then thats not right because you have setState. Which in our example of assigning new val to prop1 be as follows ```someObj = {prop1:'some value', prop2:''}``` if you don't write prop2 here then it will be deleted so you have to explicitly give it – Sulman Azhar Sep 14 '21 at 05:48
We can also write our ```someObj = {prop1:'some value', prop2:''}``` into something like this. ```someObj = {...someObj, prop1 : 'some value'}```. What this ```...``` is doing is giving our object previous properties so they don't get deleted. So in a way our ```someObj = {...someObj, prop1 : 'some value'}``` will be converted into ```someObj = {prop1 : '' , prop2 : '' , prop1 : 'some value'}```. Notice that ```prop1``` is given twice and the last ```prop1``` is overriding the first one. I hope this clears everything for you. I am sorry if i explained bad. Take a look at the link below – Sulman Azhar Sep 14 '21 at 05:55
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax – Sulman Azhar Sep 14 '21 at 05:55

setState in react it seems that it delete all state content

1 Answers1