title: How to update state in map function in reactjs
body: <p>I am having 4 buttons each button have name id and selected boolean flag.</p>
  
  <p>What I am trying to achieve is, on click of button, boolean button flag should be changed of that particular button. For this, I need to setState in map function for that particular button Id.</p>
  
  <p>My issue is I am unable to setState in map function for that particular clicked button, its btnSelected should be changed</p>
  
  <p>My aim is to create a multi-select deselect button.Its kind of interest selection for the user and based on that reflect the UI as well my array. Here is my code.</p>
  
  <p>Thanks in anticipation.</p>
  
  <pre><code>import React, { Component } from "react";
  import { Redirect } from "react-router-dom";
  
  export default class Test extends Component {
    constructor(props, context) {
      super(props, context);
  
      this.handleChange = this.handleChange.bind(this);
      this.state = {
        value: "",
        numbers: [1, 2, 3, 4, 5],
        posts: [
          {
            id: 1,
            topic: "Animal",
            btnSelected: false
          },
          {
            id: 2,
            topic: "Food",
            btnSelected: false
          },
          {
            id: 3,
            topic: "Planet",
            btnSelected: false
          },
          { id: 4, topic: "Nature", btnSelected: false }
        ],
        allInterest: []
      };
    }
  
    handleChange(e) {
      //console.log(e.target.value);
      const name = e.target.name;
      const value = e.target.value;
      this.setState({ [name]: value });
    }
  
    getInterest(id) {
      this.state.posts.map(post =&gt; {
        if (id === post.id) {
          //How to setState of post only btnSelected should change
        }
      });
      console.log(this.state.allInterest);
      if (this.state.allInterest.length &gt; 0) {
        console.log("Yes we exits");
      } else {
        console.log(id);
        this.setState(
          {
            allInterest: this.state.allInterest.concat(id)
          },
          function() {
            console.log(this.state);
          }
        );
      }
    }
  
    render() {
      return (
        &lt;div&gt;
          {this.state.posts.map((posts, index) =&gt; (
            &lt;li
              key={"tab" + index}
              class="btn btn-default"
              onClick={() =&gt; this.getInterest(posts.id)}
            &gt;
              {posts.topic}
              &lt;Glyphicon
                glyph={posts.btnSelected === true ? "ok-sign" : "remove-circle"}
              /&gt;
            &lt;/li&gt;
          ))}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>