ReactJS: Cannot Read Property 'map' of Undefined

Question

I have a parent component that fetches data and stores it into useState which then gets passed into a child component as a prop.

When that child component gets rendered, I store that prop data into useState which I try and then iterate over with a map or forEach function but I get cannot read property of undefined errors

when checking React Dev tools, the array that gets passed from Parent to child exists so im not too sure what im doing wrong.

Parent Component:

const DisplayOpenIncidents = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const incidents = FetchIncidents();

    incidents.then((incidents) => {
      setData(incidents);
      setLoading(false);
    });
  }, []);

  return (
    <AccordionExample data={data} />
  );
};

Child Component:

const AccordionExample = (props) => {
  const [test, setTest] = useState(props.data);

  useEffect(() => {
    console.log(props.data); // Displays array
    setTest(props.data);
  }, [props]);

  return (
    <Accordion defaultActiveKey="0">
      <Card>
        <Accordion.Toggle as={Card.Header} eventKey="0">
          TITLE
        </Accordion.Toggle>
        <Accordion.Collapse eventKey="0">
          <Card.Body>
            {test.forEach((test) => {
              console.log(test);
            })}
          </Card.Body>
        </Accordion.Collapse>
      </Card>
    </Accordion>
  );
};

TIA

@evolutionxbox either way, setting it inside a useEffect or not at all still doesn't allow me to iterate over it — yush
– yush, Commented May 24, 2021 at 12:25
why are you copying props into state? this is a known anti-pattern — thedude
– thedude, Commented May 24, 2021 at 12:27
It is probably because - FetchIncidents is returning undefined. Is this supposed to be an asynchronous call? ie as const incidents =await FetchIncidents(); — Inspiraller
– Inspiraller, Commented May 24, 2021 at 12:29

Deepu Reghunath · Accepted Answer · 2021-05-24 12:29:19Z

2

use the condition as follows

<Accordion.Collapse eventKey="0">
      <Card.Body>
        {test && test.forEach((test) => {
          console.log(test);
        })}
      </Card.Body>
    </Accordion.Collapse>

answered May 24, 2021 at 12:29

Deepu Reghunath

10.1k2 gold badges42 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paul Martin · Accepted Answer · 2021-05-24 12:33:45Z

I've tried to recreate this with some numbers as incidents. The issues I see are...

Your DisplayOpenIncidents component doesn't have a return statement, so the AccordionExample component isn't being rendered.
Your forEach function doesn't return anything, so the component won't render. Running map will fix this.
You're passing a state from a parent to a child, then setting the state in the child. You don't need to do this.

Here's the code working with a substitute error array...

import React, { useState, useEffect } from "react"

const AccordionExample = (props) => {

  return (
    <div defaultActiveKey="0">
      <div>
        <div eventKey="0">
          TITLE
        </div>
        <div eventKey="0">
          <div>
            {props.data.map((test) => <p>{test}</p>)}
          </div>
        </div>
      </div>
    </div>
  );
};

const App = () => {
  const [data, setData] = useState([]);

useEffect(() => {
  const incidents = [1, 2, 3]

  //incidents.then((incidents) => {
    setData(incidents);
    //setLoading(false);
  //});
}, []);

return (<AccordionExample data={data} />);
}


export default App

Thanks Paul, appreciate your detailed response here. I have taken your consideration about the props and state and have removed that from my child component. The solution in my cause was to involve another check before trying the .map/forEach loop. Thanks again

Prakash Jethava · Accepted Answer · 2021-05-24 12:36:11Z

1

Basically, you have to put check when using test object like bellow

<Accordion.Collapse eventKey="0">
      <Card.Body>
        {test ? test.forEach((test) => {
          console.log(test);
        }) : "Error"}
      </Card.Body>
</Accordion.Collapse>

answered May 24, 2021 at 12:36

Prakash Jethava

2001 silver badge7 bronze badges

Collectives™ on Stack Overflow

ReactJS: Cannot Read Property 'map' of Undefined

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related