title: How to make http call onclick using stateless component in ReactJS?
body: <p>I have a React stateless function component (SFC). I want a user to click a button and onclick a http call will be made from the SFC and when the response is received, I want to open a modal. Is it something achievable using SFC? Or do I need to keep a stateful component?</p>
  
  <p>This is my code which makes the http call on load and then onClick opens the modal. But I want both the things to happen in sequence on the onClick event.</p>
  
  <pre><code>//HTTP CALL FUNCTION
  function httpListCall(url) {
      const [list, setData] = React.useState(null);
      const [error, setError] = React.useState(null);
      React.useEffect(() =&gt; {
          axios
              .get(url)
              .then(function (response) {
                  setData(response.data.ResultList);
              })
              .catch(function (error) {
                  setError(error);
              })
      }, []);
      return { list, error };
  };
  
  //SFC
  const ListContainer = () =&gt; {
      const { list, error } = httpListCall("/list.json"); //THIS IS ON LOAD NOW - I WANT TO CALL IT onClick
      const [modalShow, setModalShow] = React.useState(false);
  
      return(
          &lt;React.Fragment&gt;
              &lt;div&gt;
                 &lt;button onClick={() =&gt; setModalShow(true)}/&gt; //WANT TO MAKE API CALL HERE AND THEN OPEN THE MODAL
              &lt;/div&gt;
              &lt;ModalWidget show={modalShow} list={advisorList} error={error} onHide={() =&gt; setModalShow(false)}/&gt;
          &lt;/React.Fragment&gt;
      )
  }
  
  export default ListContainer;
  ReactDOM.render(&lt;ListContainer/&gt;, document.getElementById("app"));
  </code></pre>
  
  <p>I have tried to make the http call from a function but it gives me an error:
  "Invalid hook call. Hooks can only be called inside of the body of a function component."</p>