title: Multiple Components with same state name, how to change one state of one component without affecting the others?
body: <p>In my react native program I have component (Bell) that is called for every item/list called from an API. The bell is used to make a notification (and cancel it)on press and I made a state (isBellActive) to determine if the Bell has been toggled on or not. If it is, isBellActive is true and false otherwise. Im storing the data via asyncStorage. </p>
  
  <p>The problem im having is that if I change the state of one bell(on one item/list) and then close the app and relaunch, that state change from that bell will affect all the other bell component's isBellActive state. How to make it so the state (even though they all share the same name) are kept for one specific item/list</p>
  
  <p><strong>Bell Component Class</strong></p>
  
  <pre><code>export default class Bell extends React.Component {
    constructor(props) {
      super(props);  
      this.state = {
        isBellActive:  null,
  
      };
    }
  
    componentDidMount = ()=&gt;{
      AsyncStorage.getItem('isBellActive').then(value =&gt; this.setState({ isBellActive: JSON.parse(value) }));
    }
  
    setTrue(){
      AsyncStorage.setItem('isBellActive', JSON.stringify(true)).then(() =&gt; {
        this.setState({ isBellActive: true});
      });
    }
  
    setFalse(){
      AsyncStorage.setItem('isBellActive', JSON.stringify(false)).then(() =&gt; {
        this.setState({ isBellActive: false});
      });
    }
  
    render() {
       return (
        &lt;Ionicons
  
          name={this.state.isBellActive? "md-notifications":"md-notifications-off"}
          color={"white"}
          size={30}
          style={styles.NotifIcon}
          onPress={() =&gt; {       
              Vibration.vibrate()
               if(this.state.isBellActive == false){             
                    PushNotificationIOS.scheduleLocalNotification({
                      userInfo:{
                        ID: this.state.ID
                      },
                      alertTitle: "Launching Soon:",
                      alertBody: this.state.alertBody,
                      fireDate: this.state.fireDate // in 30 mins
                      });
                      this.setTrue()
                      this.setState({Key:true})
                    }
                    else if(this.state.isBellActive != false){
                      PushNotificationIOS.cancelLocalNotifications({ID:this.state.ID});
                      this.setFalse()
                    }
                  }
              }
           }}
         /&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>Class that calls Component</strong></p>
  
  <pre><code>export default class LaunchingScreen extends React.Component{
   let launches = this.state.dataSource.map((item, key) =&gt; {
     ..
     &lt;View&gt;
      ..
      &lt;Bell /&gt;
      ..
     &lt;/View&gt;
       ..
    }
  }
  </code></pre>
  
  <p><strong>UPDATE</strong>
  This is in class that calls components, it gets a JSON that has all the info:</p>
  
  <pre><code>componentDidMount(){
      return fetch("https://launchlibrary.net/1.4/launch/next/20")
        .then(response =&gt; response.json())
        .then(responseJson =&gt; {
          this.setState({
            isLoading: false,
            dataSource: responseJson.launches
          }); 
        })
        .catch(error =&gt; {
          console.log(error);
        });
    }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/QSloJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QSloJ.png" alt="Picture of an item and it&#39;s bell"></a></p>