title: react fetch data on button click
body: <p>I'm trying to fetch data in react. The problem is i have to click on button twice to get that data.
  Although i don't get data on first click it somehow renders if I add JSON.stringify to it. If I don't add JSON.stringify it returns undefined. If anyone know what this is please help me</p>
  <p><a href="https://i.stack.imgur.com/GPUL0.png" rel="nofollow noreferrer">without clicking</a> <br/>
  <a href="https://i.stack.imgur.com/308qE.png" rel="nofollow noreferrer">on first click</a> <br/>
  <a href="https://i.stack.imgur.com/5vzRU.png" rel="nofollow noreferrer">on second click</a></p>
  <pre><code>import React, {useState,useEffect} from 'react';
  import ReactDOM from 'react-dom';
  import axios from 'axios'
  
  function Example() {
  
  const [students,setStudents] = useState('')
  const [name,setName] = useState('')
  
  const handleClick = async() =&gt; {
      const data = await axios.get('api/foo')
      setStudents(data)
      console.log(students)
  }
  
  return (
      &lt;div className=&quot;container&quot;&gt;
          &lt;h2&gt;Example component&lt;/h2&gt;
          &lt;button onClick = {handleClick}&gt;Get students&lt;/button&gt;
          &lt;div&gt;
              {JSON.stringify(students.data)}
          &lt;/div&gt;
      &lt;/div&gt;
  );
   }
  
  export default Example;
  
  if (document.getElementById('root')) {
       ReactDOM.render(&lt;Example /&gt;, document.getElementById('root'));
   }
  </code></pre>