title: Change the state of particular component individually in flatlist as in facebook like btns
body: <p>I've a lists of like icons in a flatlist. I want to change the color if the particular icon is clicked. But if I use likeStatus state to do it and click any icon, then the color of all the icons will change. How can I treat individual icon separately in flatlist using state? I've tried a lot but in vain. Any help is appreciated. Thanks in advance</p>
  
  <pre><code>constructor(props) {
      super(props);
      this.state = {
        isLoading: true,
        likeStatus: null,
      };
  }
  
  componentDidMount() {
      this._reload();
  }
  
  _reload = () =&gt; {
      return fetch(url)
        .then(response =&gt; response.json())
        .then(responseJson =&gt; {
          this.setState({
            isLoading: false,
            data: responseJson.data
          });
        })
        .catch(error =&gt; {
          console.log(error);
      });
   };
  
  likePost = item =&gt; {
      this.setState({
        likeStatus: !item.like_status
      });
      if (this.state.likeStatus == true) {
        ToastAndroid.show(`You have unliked the post`, ToastAndroid.SHORT);
      } else {
        ToastAndroid.show(`You have liked the post`, ToastAndroid.SHORT);
      }
      fetch(likeUploadUrl, {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          post_id: item.id,
          user_id: item.user_id
        })
      })
        .then(response =&gt; response.json())
        .then(responseJson =&gt; {
          console.log("likeResponse", responseJson);
        })
        .catch(error =&gt; {
  
        });
    };
  
  _renderItem = item =&gt; {
      return (
          _ _ _ _ _ _ _ _ _ _
          _ _ _ _ _ _ _ _ _ _
  
          &lt;TouchableOpacity
            activeOpacity={0.5}
            onPress={() =&gt; this.likePost(item.item)}
            style={{ flexDirection: "row" }} &gt;
                {item.item.like_status != null &amp;&amp;
                item.item.like_status != false ? (
                  &lt;FontAwesome5
                    name={"heart"}
                    size={15}
                    style={{color: "blue" }}
                  /&gt;
                ) : (
                  &lt;FontAwesome5
                    name={"heart"}
                    size={15}
                    style={{ color: "gray" }}
                  /&gt;
                )}
          &lt;/TouchableOpacity&gt;
      );
    };
  
  render() {
      return(
          &lt;FlatList
              data={this.state.data}
              renderItem={this._renderItem}
           /&gt;
      );
  }
  </code></pre>