title: How to hide single element in map function in react native onPress?
body: <p>Suppose I'm given an object of elements, which I loop via map and rendered. When I click on one of the lists, I expect that element to hide from the render.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>Object.keys(this.state.doctors).map((uid, i) =&gt; { return (
  &lt;View style={styles.doctorContainer} key={uid}&gt;
    &lt;View style={styles.imgCircleContainer}&gt;
      &lt;View&gt;
        &lt;Image style={styles.userImg} source={require( '../Images/Naseebullah.jpg')} resizeMode="contain" /&gt;
        &lt;View style={styles.imgOverlay} /&gt;
      &lt;/View&gt;
    &lt;/View&gt;
  
    &lt;View&gt;
      &lt;Text style={{textAlign: 'center', fontSize: 15, color: '#bccad0'}}&gt;{this.state.doctors[uid].name}&lt;/Text&gt;
      &lt;Text style={{textAlign: 'center', fontSize: 12, color: 'rgba(188, 202, 208, 0.7)'}}&gt;{this.state.doctors[uid].profession}&lt;/Text&gt;
    &lt;/View&gt;
  
    &lt;TouchableOpacity style={styles.folllowBtn} onPress={()=&gt; Database.followDoctor( this.state.doctors[uid].name, this.state.doctors[uid].profession, uid, this.state.type, this.state.healthAlert )}&gt;
      &lt;Text style={{color: 'white', fontSize: 13, fontWeight: 'bold', textAlign: 'center'}}&gt;Follow&lt;/Text&gt;
    &lt;/TouchableOpacity&gt;
  
  &lt;/View&gt;
  ) })</code></pre>
  </div>
  </div>
  </p>
  
  <p>So when <code>Database.followDoctor()</code> is called onPress. That element should hide. Not the whole list. How can this be achieved? </p>
  
  <p>I come from angularjs background, wherein angular we have whats called local variables assigned to each element in the loop, and we can condition it. But how can this be achieved in react native?</p>
  
  <h1>Edit</h1>
  
  <p>The method followDoctor() is not helpful because it is a method that communicated to firebase server</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>static followDoctor(msgTo, profession, uid, type, healthAlert) {
    User().then(user =&gt; {
      firebase.app().database().ref(`/Users/${user.uid}/Doctors/${uid}`).set({
        name: msgTo,
        profession: profession
      }).then(() =&gt; {
        console.log("successfully added to DoctorsList!");
        this.initialiseMessagesDB(msgTo, healthAlert, uid).then(() =&gt; {
          //this.setMessage(uid, type);
        })
        //this.setMessage(uid, type, healthAlert, userName);
      }).catch(e =&gt; console.log(e));
    });
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The issue lies within the onPress function. If we can somehow do something in the onPress() function of the button and hide the element, then it would be great.</p>
  
  <h1>What is my issue then?</h1>
  
  <p>The problem isn't that I'm unable to filter them out. In fact, my current implementation does filter them out. But the issue is timing, between the click event and hiding of the element. Because the click even goes to firebase and appends the object (which adds the doctor into the object) it creates few milliseconds delay. I would like to hid the element as soon as it is clicked, and in background I do the firebase checking and what not.</p>