React mapping through a query result is not working

Question

I'm using React and I'm trying to map the result of a GET request to the db to display some tabs in my page.

This is my GET request:

useEffect(async ()=>{
  const a = await getCategories();
  setCategories(a)
    
},[])
  
const [categories, setCategories] = useState()

I then store the returned array in my functional component state with useEffect hook:

useEffect(async ()=>{
  const a = await getCategories();
  setCategories(a)

},[])
  
const [categories, setCategories] = useState()

At the end, in the render I try to map through the state array like this:

<Nav variant="tabs" >
  {categories.map((category, index) => (
    <Nav.Item key={index}>
      <Nav.Link
      eventKey={`link-${index}`}
      onClick={() => setCategory(category.category)}
      >
        {category}
      </Nav.Link>
    </Nav.Item>
  ))}
</Nav>

I'm getting a TypeError: Cannot read property 'map' of undefined

I think that's because it runs the map before i have the array stored in the state but i have no idea how to solve it.

@yuRa that code is working well, i tested it with postman and was returning an array as i expected — Lorenzo Case Del Rosario, Oct 23 '20 at 10:24

score 3 · Accepted Answer · answered Oct 23 '20 at 09:28

3

You can set the default value for categories using an empty array:

const [categories, setCategories] = useState([])

You can also optionally add a defensive conditional mapping by checking if categories is iterable:

{Array.isArray(categories) && categories.map((category, index) => (..)}

answered Oct 23 '20 at 09:28

Heri Hehe Setiawan

1,535
1
12
19

How does this answer the question? – yudhiesh Oct 23 '20 at 09:33
1

How does it not answer the question :D ? – Misha Reyzlin Oct 23 '20 at 09:38
Thank you very much! So by having the empty array it maps over the empty one and when i assign the array fetched from the db it maps again over the new one, right? – Lorenzo Case Del Rosario Oct 23 '20 at 10:32

score 2 · Answer 2 · answered Oct 23 '20 at 09:35

async in useEffect will cause a warning, so use it like: Ref

useEffect(()=>{

const fetchData = async () => {
      const a = await getCategories();
      setCategories(a);
    };
 
    fetchData();

},[])

and declare a default empty array in state:

const [categories, setCategories] = useState([]);

Or you can validate that categories are available to iterate like this:

<Nav variant="tabs" >
  {categories.length > 0 && categories.map((category, index) => (
    <Nav.Item key={index}>
      <Nav.Link
      eventKey={`link-${index}`}
      onClick={() => setCategory(category.category)}
      >
        {category}
      </Nav.Link>
    </Nav.Item>
  ))}
</Nav>

Great, it works now, thank you! Why the async await on the useEffect could lead to problems but an async await inside of an useEffect doesn't? Kinda confusing to me. — Lorenzo Case Del Rosario, Oct 23 '20 at 10:28
You can read here. https://www.robinwieruch.de/react-hooks-fetch-data — bakar_dev, Oct 23 '20 at 10:30

score 2 · Answer 3 · answered Oct 23 '20 at 09:35

Yes, you are right, before rendering, the categories is empty. You have to check whether categories is empty or not before rendering:

return !categories.length ?   
 <Nav variant="tabs" >
   {categories.map((category, index) => (
     <Nav.Item key={index}>
       <Nav.Link
         eventKey={`link-${index}`}
         onClick={() => 
 setCategory(category.category)}
      >
        {category}
      </Nav.Link>
    </Nav.Item>
  ))}
</Nav>

:
<h1>Loading...</h1>

score 0 · Answer 4 · answered Oct 23 '20 at 09:36

0

It's difficult to answer without looking at setCategories()

You can solve this with checking if the array exists before you map it

array & array.map(item => {
    return item * 2
})

This won't return undefined because the first condition will fail.

answered Oct 23 '20 at 09:36

theabrar

360
1
6
15

The setCategories is part of the useState hook. It works as a this.setState for class based components. – Lorenzo Case Del Rosario Oct 23 '20 at 10:26

React mapping through a query result is not working

4 Answers4