How to solve error Type 'void[] | undefined' is not assignable to type 'ReactNode&#03-CodePudding

am trying to map the data Array but am getting Type 'void[] | undefined' is not assignable to type 'ReactNode', please what am doing wrong here.

Here's the code

import axios from "axios"
import { Box } from '@mui/system'
import React from 'react'
import useSWR from 'SWR'

const SearchExercise:React.FC = () => {

    const options = {
        method: 'GET',
        url: 'https://exercisedb.p.rapidapi.com/exercises/bodyPartList',
        headers: {
          'X-RapidAPI-Key': process.env.NEXT_PUBLIC_RAPID_API_KEY,
          'X-RapidAPI-Host': 'exercisedb.p.rapidapi.com'
        }
      };

    const fetcher = (options:any) => axios.request(options).then(res => res.data)

    const {data, error} = useSWR<string[] |undefined>(options, fetcher)

  return (
    <main>
        {data && data.map(item => (console.log(item)))}
    </main>
  )
}

export default SearchExercise

CodePudding user response：

React.FC expects JSX.Element returned. You can alter to do the following:

  return (
    <main>
        {data && data.map(item => {
          console.log(item);
          return <></>;
        })}
    </main>
  )

However, I'd suggest moving your console log outside of your return value.