title: How to update a function with useEffect (like componentDidUpdate) and use .map function to display from JSON file ReactJS
body: <p>I've been trying to update a function once data has been recieved and set to a state (using useState). After that the function will use the .map function display the data into a template.</p>
  
  <p>However i am getting two errors, one is 'projects.map is not a function' (btw projects is my state name, where data is stored) and inside the useEffect function which updates when projects is changed 'Expected an assignment or function call and instead saw an expression'</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState, useEffect } from 'react';
  import ProjectSummary from './projectSummary';
  
  
  function ProjectList() {
  
    // setting my state
    const [projects, setProjects] = useState([])
  
    // getting the data from some dummy online data when the app     starts
    useEffect(() =&gt; {
      fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response =&gt; response.json())
        .then(data =&gt; setProjects({ data }))
  
    }, []);
  
      // makeing a function call postList, which stores a ternery     operator
      const postList = () =&gt; {
      // The ternery operator asks if there is anything inside the porjects state
        projects.length ? (
        // If there is something in the state, it will map out the JSON array in the 'projectSummary template
          projects.map(projects =&gt; {
            return(
              &lt;div &gt;
                &lt;ProjectSummary key={projects.id} title={projects.title} author={projects.userId} date='30 september, 2019' content={projects.body}/&gt;
  
              &lt;/div&gt;
            )
          })
        ) : (
        // If there isnt anything in the state is prints out 'Loading Data'
          &lt;h1&gt;Loading Data&lt;/h1&gt;
        );
      }
      
      
      // useEffect updates when the 'projects' stae is updated (like componentDidUpdate, and runs the function again
      useEffect(() =&gt; {
     
        postList()
     
      }, [projects]);
  
  
    return(
      &lt;div className="ProjectList"&gt;
      
        // The component should output the postList function, which should map out the array, in the template
        { postList }
  
  
      &lt;/div&gt;
    )
  }
  
  export default ProjectList</code></pre>
  </div>
  </div>
  </p>