Escribí un estilo de objeto y lo estaba llamando en estilo de cualquier elemento. Fue genial decir que quería editar un valor de estilo de algún elemento, así que traté de cambiarlo como

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

Pero eso me dio un error de solo lectura, así que puse el objeto cardStyle en orden usando setState , y ahora cuando trato de cambiar cualquier setState anyvalue parece que solo pone ese valor y borra todo de él.

Este es el código:

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