0

I have tried so many ways to get the correct type for useState when setting an array of objects as the data.

I am pulling in data from an api and setting it using setState on a button press. But for the life of me cant work out how to define the type so typescript does not scream at me.

The error is being shown where I map the countryData in the JSX.

full Error is "Type 'void[]' is not assignable to type 'ReactNode'. Type 'void[]' is not assignable to type 'ReactFragment'. The types returned by 'Symbol.iterator.next(...)' are incompatible between these types. Type 'IteratorResult<void, any>' is not assignable to type 'IteratorResult<ReactNode, any>'. Type 'IteratorYieldResult' is not assignable to type 'IteratorResult<ReactNode, any>'. Type 'IteratorYieldResult' is not assignable to type 'IteratorYieldResult'. Type 'void' is not assignable to type 'ReactNode'.ts(2322)"

Code is below.

MicSt
  • 177
  • 2
  • 21

1 Answers1

2

You are missing return in your map function:

{countryData?.map((item : CountryData) => {
        return <CountryStats 
        countryCapital={item.capital}
        countryFlag={item.flags.png}
        countryName={item.name.common}
        countryPopulation={item.population}
        />
       })}
wonderflame
  • 6,759
  • 1
  • 1
  • 17
  • Thank you! - I have mapped components nearly all the time without using a return I wonder why it needs a return this time. I must being using a different format to how I do it previously. – MicSt May 09 '23 at 19:32
  • How would I map it without using a return? as I also want to wrap it in a (showData &&} ternary so it only shows if there is data – MicSt May 09 '23 at 19:33
  • Use parenthesis instead of curly braces. More here: https://stackoverflow.com/questions/39629962/arrow-function-without-curly-braces – jakehurt May 09 '23 at 19:33
  • if you want to do it without a return you should remove `{}` and use `()` instead. – wonderflame May 09 '23 at 19:34
  • 1
    `array.map((item, idx) => (
    ))`     – wonderflame May 09 '23 at 19:34