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>
    
        
        }
    }