title: FlatList renderItem cannot read the state
body: <p>My code crash when loading the FlatList because of the state of one variable is undefined, I am trying to see what's going on so print the value while loading the data, I see what I put on super.props</p>
  
  <p>Note that I am nesting another FlatList inside the main one:</p>
  
  <pre><code>  export default class List extends React.Component {
      constructor(props) {
      super(props)
      this.state = {
      collapsed: true,
      }
    }
  
     componentDidMount() {
      this.apiCall();
     }
  
    renderItem({ item, index }) {
    const collapsed = this.state;
    return 
    &lt;View style={styles.card}&gt;
  
      &lt;TouchableOpacity onPress={ () =&gt; {
        this.setState({ collapsed: !this.state.collapsed });
        }}&gt;
        &lt;Text style={styles.header}&gt;
          {item.name.trim()}
        &lt;/Text&gt;
      &lt;/TouchableOpacity&gt;
  
      &lt;FlatList
      style={{paddingBottom: 20}}
      data={item.positions}
      numColumns={1}
      listKey={(item, index) =&gt; item.id}
      keyExtractor={(item, index) =&gt; item.id}
      renderItem={({ item, index }) =&gt; (
  
        &lt;Collapsible collapsed={this.state.collapsed} align="center"&gt;
          &lt;Text style={styles.position} &gt;{item.position.trim()}&lt;/Text&gt;
        &lt;/Collapsible&gt;
  
          )}/&gt;
    &lt;/View&gt;
    }
  
    render() {
    const resizeMode = 'cover';
    const collapsed = this.state;
    return (
  
      &lt;Text&gt;{this.state.collapsed.toString()}&lt;/Text&gt;
  
      {this.state.loaded ?
      &lt;Animatable.View easing='ease-out-circ'
      duration={1000} animation="fadeIn" &gt;
  
      &lt;FlatList
      keyExtractor={(item, index) =&gt; item.id}
      removeClippedSubviews={true}
      maxToRenderPerBatch={32}
      initialNumToRender={64}
      contentContainerStyle={styles.list}
      data={this.state.data}
      numColumns={2}
      showsVerticalScrollIndicator={false}
      listKey={(item, index) =&gt; item.id}
      renderItem={this.renderItem}
      style={styles.list}
      /&gt;
  
      &lt;/Animatable.View&gt; 
      : null}
        );
      }
    }
  </code></pre>
  
  <p>The error I got after loading the data:</p>
  
  <blockquote>
    <p>TypeError : undefined is not an object ( evaluating
    this3.state.collapsed )</p>
  </blockquote>
  
  <p>As far as what I tried is setting undefined in <code>&lt;Collapsible collapsed={undefined} align="center"&gt;</code> I can print the elements like expected but then the touchableOpacity don't work because of undefined. </p>
  
  <p>Please someone help. Thanks</p>
  
  <p>PS: Not sure if it works it gonna collapse all views or just the clicked one!</p>