title: Getting "Error: Objects are not valid as a React child when rendering object values
body: <p>I am trying to render values from data object in an array but I have got these error messages</p>
  <blockquote>
  <p>Error: Objects are not valid as a React child (found: object with keys
  {id, course_code, course_name, slug, course_fee, duration, start_date,
  end_date,}</p>
  </blockquote>
  <p>I don't really know where am getting it wrong.
  Here is the API object response.</p>
  <pre><code>{
    &quot;success&quot;: true,
    &quot;message&quot;: &quot;Course Retrieved Successfully.&quot;,
    &quot;data&quot;: {
      &quot;id&quot;: 1,
      &quot;course_code&quot;: &quot;null&quot;,
      &quot;course_name&quot;: &quot;Greatness&quot;,
      &quot;slug&quot;: &quot;greatness&quot;,
      &quot;course_fee&quot;: 10,
      &quot;duration&quot;: &quot;10hours&quot;,
      &quot;start_date&quot;: &quot;2000-09-08&quot;,
      &quot;end_date&quot;: &quot;2000-09-08&quot;,
    }
  }
  </code></pre>
  <p>My code below</p>
  <pre><code>const [coursedetails, setCourseDetails] = useState([])
  const [status,setStatus] = useState('init');
  
  const init =()=&gt;{
    setStatus('loading')
  
    return axios.get('http://example.com/api/courses').then(response =&gt; {
        setCourseDetails(response.data);
        setStatus('success')
      }).catch(error =&gt;{
        console.log('error',error)
        setStatus('error')
      })
  }
  
  useEffect(()=&gt;{
    init()
  },[])
  
  
  return(
    &lt;div&gt;
  
    {coursedetails.data &amp;&amp; coursedetails.data.course_name ? coursedetails.data : ''}
    &lt;div&gt;
  )
  </code></pre>