Mapping in react component using state issue

[deboer753]

// REACT:
import {React, useState, useEffect} from 'react'

// HOME:
export default function News() {
  const [nyseData, setNyseData] = useState([])
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    fetch(`https://catfact.ninja/facts?max_length=30&limit=10`)
    .then(res => res.json())
    .then(data => {
      setNyseData(data)
      setIsLoading(false)
    });
  }, [])

  console.log('State Data:', nyseData.data)
  
  // console.log(nyseData);
  // {nyseData.data[0].fact} 

  return (
    <>
      <div>
        {/* {isLoading ? <h1>loading...</h1> : <h1>{nyseData.data[0].fact}</h1>} */}
        {isLoading ? <h1>loading...</h1> :
        <div>
          {nyseData.map((x) => { 
            return (
              <div>
                <h1>{x.fact}</h1>
              </div>
             )
          })}
          </div>}
      </div>
    </>

1.) the img attached is the data I am working with logged in chrome tools 2.) I want to point out that the line below the first div with the ternary statement with isLoading works fine. I am able to access object data (fact or length) within my state array value. 3.) My issue: I want to map all the facts ( or length’s) from each object in array to the page. When trying to do this it gives me a map is not a function error. I have tried multiple ways but have had no luck in solving this. I also followed this youtube video at minute 4:13 which appears to be close to identical to what I have (Using Map Method in React - Mapping through the state, API, JSON Data - YouTube) including this article (TypeError: map() is not a function in React | bobbyhadz) but still nowhere. Can someone help? I tried asking on stack overflow here () but I am not sure what this person is telling me since I already have chosen one, which is [nyseData, setNyseData] = useState()

[liam.stojanovic]

Just guessing here, because you didn’t supply a screenshot / information about your map is not a function error…

Could it be because you aren’t accessing your state object correctly? What happens if you try
{nyseData.data.map((x) => {...

I can see that you use that object property in your console.log() but not your .map().

[deboer753]

Hi Liam,

I went ahead and attached the error screen shot just now.

As for your suggestion, I already have the map method inside of that div there.

 <div>
          {nyseData.map((x) => { 
            return (
              <div>
                <h1>{x.fact}</h1>
              </div>
            )
          })}
          </div>}

[kevinSmith]

console.log('State Data:', nyseData.data)

and

{nyseData.map((x) => { 

is nyse an object or an array? In snipped one you are dotting into it as an object. In the second, you are mapping it like it is an array.

Did you mean:

{nyseData.data.map((x) => { 

[kevinSmith]

Whenever I get a “foo.map is not a function” or whatever, my first instinct would be to log out “foo” and see what it is.

[deboer753]

Ahhh i think i got it now. you inspired me to take a second (more like 100th) look on my data being stored. the log of what I had threw me off of nyseData.data. That result of log was not being stored in my state. Thank you Kevin

now have this instead:

  useEffect(() => {
    fetch(`https://catfact.ninja/facts?max_length=30&limit=10`) // ••• Test: Cat API (replace with API LINK above when ready)
    .then(res => res.json())
    .then(data => {
      setNyseData(data.data) // instead of nyseData(data)
      setIsLoading(false)
    });
    // .catch(error => console.error('data not loaded', error)) ••• issue with this line.
  }, [])

[kevinSmith]

When in doubt, log it out.

There are also some cool devtools that you’ll want to explore, like React and Redux developer tools. But logging is the most basic step.