title: React Native FlatList - Calling A Function In The Render Method Which Returns A Component
body: <p>I'm using FlatList to create a selectable list that highlights/ticks each item that is selected.</p>
  
  <p>on index.js I'm using the component this way:</p>
  
  <pre><code>&lt;SelectableList
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={(item) =&gt; &lt;Text&gt;{item.key}&lt;/Text&gt;}
  /&gt;
  </code></pre>
  
  <p>on selectable-list.js I'm defining the list as:</p>
  
  <pre><code>renderItem = (item) =&gt; {
      return (
        &lt;View&gt;
          &lt;Text&gt;aaa&lt;/Text&gt;
          {this.props.renderItem(item)}
          &lt;Text&gt;xxx&lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  
  render() {
    return (
      &lt;FlatList
        data={this.state.data}
        renderItem={this.renderItem}
      /&gt;
    );
  }
  </code></pre>
  
  <p>This is the output I get:</p>
  
  <p>aaa</p>
  
  <p>xxx</p>
  
  <p>aaa</p>
  
  <p>xxx</p>
  
  <p>I expect it to be:</p>
  
  <p>aaa</p>
  
  <p>a</p>
  
  <p>xxx</p>
  
  <p>aaa</p>
  
  <p>b</p>
  
  <p>xxx</p>
  
  <p>this Line is not working:</p>
  
  <pre><code>{this.props.renderItem(item)}
  </code></pre>