title: React js : change background color for specific item in list of items
body: <p>i have my variable messageInbox is array of messages that will display by .map as below </p>
  
  <pre><code>      {messageInbox
  
              .map((chat ,index)=&gt; (
  
                &lt;Inbox chat={chat} backgroundColor={this.state.backgroundColor} inBox={this.props.inBox} setInBox={this.props.setInBox} tourists={this.state.tourists.filter(x =&gt; x.hotel_id == this.context.hotel_id[0])} chats={this.props.chats} key={index} /&gt;
  
              ))
            }
  </code></pre>
  
  <p>i want to change the background color of the clicked item by the onClick event in my div</p>
  
  <hr>
  
  <pre><code>class Inbox extends Component
    constructor(props) {
      super(props);
      this.state = {
        backgroundColor:'#2e405e'
      }
  
    }
  
  
  
  
  
    render() {
      return (
        &lt;div className="InboxContainer" style={{backgroundColor:this.state.backgroundColor}} 
   onClick={ this.setState({backgroundColor:'#111f35'}) } &gt;
  
  
          &lt;div className="ImageMsg"&gt;
            &lt;img src="/img/chat/contact.png" className="imgContact" /&gt;
          &lt;/div&gt;
  
          &lt;div className="TextMsg"&gt;
            {this.props.tourists.map(name =&gt; {
              return name.id == this.props.chat.sender ?
                &lt;p className="nameContact"&gt; {name.nom}&lt;/p&gt;
                : ""
            })}
            {/* &lt;p className="nameContact"&gt; {this.props.chat.sender}&lt;/p&gt; */}
            &lt;p className="msgContact"&gt;
              {this.props.chat.message}
  
            &lt;/p&gt;
          &lt;/div&gt;
  
          {/* &lt;div className="TimeMsg"&gt; */}
          {/* &lt;p&gt;{this.props.chat.time}&lt;/p&gt; */}
          {/* &lt;ReactSVG
                src="/img/chat/notSeen.svg"
                className="svgIconSeensend"
              /&gt;
   &lt;/div&gt;
         */}
  
  
  
  
        &lt;/div&gt;
      );
    }
  
  }
  Inbox.contextType = UserContext
  export default withRouter(Inbox);
  </code></pre>
  
  <p>but she doesn't detect when i clicked on a new item ,can somebody help me,thank's</p>