getting undefined is not a function when trying to .map an api in react

Question

im trying to make a call to an api everything works fine until I try to map over it to render elements on the screen. im using thenewsapi.com I keep getting TypeError: undefined is not a function (near '...newStory.map...').


export default function News() {
    const [newStory, setNewStory] = React.useState([]);



    React.useEffect(() => {
       const fetchArticle = async () =>{
        const requestOptions = {
            method: 'GET'
        };
        
        const params = {
            api_token: 'api_key',
            categories: 'business,tech,sports',
            language: "en",
            limit: '1'
        };
        
        const esc = encodeURIComponent;
        const query = Object.keys(params)
            .map(function(k) {return esc(k) + '=' + esc(params[k]);})
            .join('&');
        
        await fetch("https://api.thenewsapi.com/v1/news/all?" + query, requestOptions)
          .then(response => response.text())
          .then(result => setNewStory(result))
          .catch(error => console.log('error', error));
       }
       fetchArticle()
    }, [])

    console.log(newStory);

    const newArticle = newStory.map(({ title}, index) => {
        return <h5 key={index}>{title}</h5>
    })
   

    return (
        <>
           {newArticle}
        </>
    )
}```

Ali Navidi · Accepted Answer · 2022-04-25 06:30:18Z

2

Its because newStory is an empty array at first and it takes time to fetch data from api you can use an if for your render like this:

 return (
        <>
           {newStory && newStory.map(({ title}, index) => {
        return <h5 key={index}>{title}</h5>
    })}
        </>
    )

or define an empty title for your useState like this:

const [newStory, setNewStory] = React.useState([{title: ""}]);

answered Apr 25, 2022 at 6:30

Ali Navidi

1,0532 gold badges8 silver badges26 bronze badges

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

4 Comments

ked00 Over a year ago

still giving me the same error.. maybe its something with the api because every other api I have is rendering just fine with an empty array and a simple fetch call

Ali Navidi Over a year ago

you can check if the api sends an empty array or not.

ked00 Over a year ago

I figured it out I set my state to undefined and instead of mapping over the array I just returned my state

Ali Navidi Over a year ago

I'm happy for you!

Collectives™ on Stack Overflow

getting undefined is not a function when trying to .map an api in react

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related