When I console log locs.data I get an array, yet it says it is undefined..? Not sure what’s wrong with this.

let [locs, setLocs] = useState([])

    useEffect(() => {
        fetch("http://localhost:3000/api/locations")
        .then((res) => res.json())
        .then((data) => setLocs(data))
    }, [])

<Menu>
                        <MenuButton 
                            px={4}
                            py={2}
                            transition="all 0.2s"
                            borderRadius="md"
                            borderWidth="1px"
                            as={Button}
                            rightIcon={<ChevronDownIcon />}>
                            Location Links
                        </MenuButton>
                        <MenuList>
                         {locs.data.map(loc => (
                            console.log(loc)
                         ))}
                        </MenuList>
                    </Menu>

>Solution :

printing runs before useEffect sometimes especially if you have async calls

try to check ifs it’s defined (true)

let [locs, setLocs] = useState()
...
<MenuList>
  {locs?.data?.map(loc => ( // ? suffix means continue if true
    console.log(loc)
  ))}
</MenuList>

OR change default state value to

let [locs, setLocs] = useState({date:[]})