title: Pass fetch data to components using useState React Native
body: <p>I am new to React Native. Actually this is my first app.</p>
  
  <p>I have been trying to pass data from Fetch to components, but no luck there. I have researched Google up and down, left and right, tried million things, but still no go.</p>
  
  <p>This is my App.js</p>
  
  <pre><code>import React, {useState, useEffect} from 'react';
  import { View, StyleSheet, ScrollView } from 'react-native';
  
  import Header from './parts/header';
  // import BigNews from './parts/big-news';
  import Index from './screens/index.js';
  
  const authorization = { authorization: '1234aa' };
  
  export default function App() {
    const [fetchApiData, setApiData] = useState();
  
    useEffect(() =&gt;
    fetch('https://example.com/get-app-home.php', {
      method: 'POST', // or 'PUT'
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(authorization),
    })
    .then(res =&gt; res.json())
    .then(res =&gt; {
      this.setState({ setApiData: res })
    })
    .catch(() =&gt; this.setState({ hasErrors: true }))
    );
    return (
      &lt;View style={styles.viewport}&gt;
        &lt;Header /&gt;
        &lt;ScrollView style={styles.contentHolder}&gt;
          &lt;Index content={fetchApiData}/&gt;
        &lt;/ScrollView&gt;
      &lt;/View&gt;
  );
  
  
  }
  </code></pre>
  
  <p>And this is my index.js file</p>
  
  <pre><code>import React from 'react';
  import { View, Text } from 'react-native';
  
  import BigNews from '../parts/big-news';
  import SmallNews from '../parts/small-news';
  import Colors from '../constants/colors'
  
  const Index = props =&gt; {
  
      return (
        &lt;View&gt;
          &lt;BigNews
          image={props.content.first.image}
          pretitle={props.content.first.pretitle}
          title={props.content.first.title}
          introduction={props.content.first.introduction}
          style={{color: props.content.first.mark}}/&gt;
  
          &lt;SmallNews
          image={props.content.second.image}
          pretitle={props.content.second.pretitle}
          title={props.content.second.title}
          style={{color: props.content.first.mark}}/&gt;
  
          &lt;SmallNews
          image={props.content.second.image}
          pretitle={props.content.second.pretitle}
          title={props.content.second.title}
          style={{color: props.content.first.mark}}/&gt;
  
          &lt;SmallNews
          image={props.content.second.image}
          pretitle={props.content.second.pretitle}
          title={props.content.second.title}
          style={{color: props.content.first.mark}}/&gt;
        &lt;/View&gt;
      );
  }
  export default Index;
  </code></pre>
  
  <p>I am constantly getting TypeError: undefined is not an object (evaluating 'props.content.first')</p>
  
  <p>I tried million ways, but most of the times this is the error that I see. If I do console.log of state I get either undefined or empty.</p>