title: Invalid Hook Call - React Hooks
body: <p>I'm really new to JS and React. I get this error:
  <a href="https://i.stack.imgur.com/8LQbJ.png" rel="nofollow noreferrer">Invalid Hook Call</a>
  when I try to make a component appear and disappear when another component is clicked. This is my code:</p>
  <pre><code>const RenderList = ({data}) =&gt; {
      return data.map((option, index) =&gt; {
          return &lt;Item title={option}/&gt;
      });
  };
  
  const Header = ({ title, style, press }) =&gt; (
      &lt;TouchableHighlight onPress={press}&gt;
          &lt;Text  style={style} &gt;{title}&lt;/Text&gt;
      &lt;/TouchableHighlight&gt;
  )
  
  const RenderItem = ( {item} ) =&gt; {
      console.log(styles)
  
      let dataToShow;
      
      const [listState, setListState] = useState(true);
  
      if (listState){
          dataToShow = &lt;RenderList data={item.data}/&gt;
      } else {
          dataToShow = &lt;Text/&gt;
      }
  
      return (
          &lt;View style={styles.section}&gt;
              &lt;Header title={item.title} style={styles.header} press={setListState(!listState)}/&gt;
              {dataToShow}
          &lt;/View&gt;
  )}
  </code></pre>
  <p><em><strong>EDIT</strong></em>
  RenderItem is used in a flat list element as a function. (From what I understand)</p>
  <pre><code>const SettingsSection = (props) =&gt; {
      const db = props.data;
  
      return(
          &lt;View&gt;
              &lt;FlatList 
                  style={styles.sectionList}
                  data={db}
                  renderItem={RenderItem}
                  keyExtractor={item=&gt;item.title}  
                  ItemSeparatorComponent={FlatListItemSeparator}          
              /&gt;            
          &lt;/View&gt;
      );
  }
  </code></pre>