javascriptreactjsuse-state

JavaScript UseState.map is not a function


I'm working with reactjs trying to get and list the incidents in my page. According to console.log(incidents), incidents is a empty array, but when I run it the return is:

TypeError: incidents.map is not a function

export default function Profile() {
  const ongName = localStorage.getItem("ongName");
  const ongID = localStorage.getItem("ongID");
  const history = useHistory();

  const [incidents, setIncidents] = useState([]);

  useEffect(() => {
    async function a() {
      api.get('profile', {
        headers: {
          Authorization: ongID,
        },
      }).then((response) => {
        console.log(response.data)
        setIncidents(response.data);
      });
    }
    a();
  }, [ongID]);

  return (
    <div className="profile-container">
      <ul>
        {console.log(incidents),
          incidents.map(incident => (
            <li key={incident.id}>
              <strong>Caso:</strong>
              <p>{incident.titulo}</p>
            </li>
          ))}
      </ul>
    </div>
  );
}
index.js:67 []length: 0__proto__: Array(0)
index.js:67 []length: 0__proto__: Array(0)
index.js:22 {incidents: Array(2)}incidents: Array(2)0: {id: 7, titulo: "csa", desc: "dsadsa", valor: "dsa", ong_id: "857bc663"}1: {id: 8, titulo: "asf", desc: "sdf", valor: "d", ong_id: "857bc663"}length: 2__proto__: Array(0)__proto__: Object
index.js:67 {incidents: Array(2)}
index.js:67 {incidents: Array(2)}

Solution

  • Your log seems to indicate that response.data is an object with the incidents array as a property.

    Can you try replacing :

        setIncidents(response.data);
    

    with:

        setIncidents(response.data.incidents);