React js：更改项目列表中特定项目的背景颜色

Question

i have my variable messageInbox is array of messages that will display by .map as below

      {messageInbox

            .map((chat ,index)=> (

              <Inbox chat={chat} backgroundColor={this.state.backgroundColor} inBox={this.props.inBox} setInBox={this.props.setInBox} tourists={this.state.tourists.filter(x => x.hotel_id == this.context.hotel_id[0])} chats={this.props.chats} key={index} />

            ))
          }

i want to change the background color of the clicked item by the onClick event in my div

---

class Inbox extends Component
  constructor(props) {
    super(props);
    this.state = {
      backgroundColor:'#2e405e'
    }

  }





  render() {
    return (
      <div className="InboxContainer" style={{backgroundColor:this.state.backgroundColor}} 
 onClick={ this.setState({backgroundColor:'#111f35'}) } >


        <div className="ImageMsg">
          <img src="/img/chat/contact.png" className="imgContact" />
        </div>

        <div className="TextMsg">
          {this.props.tourists.map(name => {
            return name.id == this.props.chat.sender ?
              <p className="nameContact"> {name.nom}</p>
              : ""
          })}
          {/* <p className="nameContact"> {this.props.chat.sender}</p> */}
          <p className="msgContact">
            {this.props.chat.message}

          </p>
        </div>

        {/* <div className="TimeMsg"> */}
        {/* <p>{this.props.chat.time}</p> */}
        {/* <ReactSVG
              src="/img/chat/notSeen.svg"
              className="svgIconSeensend"
            />
 </div>
       */}




      </div>
    );
  }

}
Inbox.contextType = UserContext
export default withRouter(Inbox);

but she doesn't detect when i clicked on a new item ,can somebody help me,thank's

Answer 1

I can provide you a simple demo how to do with working example.

you can change as per your requirement. Live demo

Code

class App extends React.Component {
  state = {
    arr: [
      { id: 1, name: "profile", title: "Profile" },
      { id: 2, name: "recruit", title: "Recruitment" },
      { id: 3, name: "arts", title: "Arts" },
      { id: 4, name: "talents", title: "Talents" },
      { id: 5, name: "affection", title: "Affection" }
    ],
    selected: ""
  };
  changeColor = id => {
    this.setState({ selected: id });
  };
  render() {
    const { selected, arr } = this.state;
    return (
      <div>
        <h2>Click to items</h2>
        <ul>
          {arr.map(({ name, id, title }) => (
            <li key={id}>
              <h3 style={{color: selected === id ? "red" : ""}}
                onClick={() => this.changeColor(id)}
                name={name}>
                {title}
              </h3>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}