Showing map is not function in react page after refreshing the page

Question

I built a simple react app that fetch the users from database like mysql After fetching data I want to pass data to child component and it works sometimes but when refresh page it throw error like data.map is not function here error message image my code of parent component

import React,{useEffect, useState ,Context, createContext} from 'react'
import Sidenav from '../components/Sidenav'
import {makeStyles} from '@material-ui/core/styles';
import Content from '../components/ContentParent'
import RightSideNav from '../components/RightSideNav'
import Backdrop from '@material-ui/core/Backdrop';
import Async from 'react-async';
import CircularProgress from '@material-ui/core/CircularProgress';
import { get } from 'js-cookie';
const bodyData = createContext()
const useStyles = makeStyles((theme) => ({
    HomeDataContainer_parent:{
        backgroundColor:'#F2F2F2',
        display:'flex',
    },
    backdrop: {
        zIndex: theme.zIndex.drawer + 1,
        color: '#fff',
      },
}))
 function HomeDataContainer() {
    const [data,setData] = useState('')
    const [isload,setload] = useState(true)   
    useEffect(() =>{
       async function get(){
            fetch('/postsDrawer').then(async data => await data.json()).then(result =>{ setData(result)
             setload(false)
             
            })
        }
       get()
    },[data])
    const classes = useStyles()
    return (
            
        <div className = {classes.HomeDataContainer_parent}>
        <Backdrop className={classes.backdrop} open={isload} >
        <CircularProgress color="inherit" />
      </Backdrop>
            {/* sidenav */}
            <Sidenav/>
            {/* content */}
           
            if(data){
                <Content value = {data} />
            }
         
            {/* Right side updates */}
            <RightSideNav />
        </div>
    )
}
export default HomeDataContainer
export { bodyData }

child component

import React from 'react'
import {makeStyles} from '@material-ui/core/styles'
import Avatar from '@material-ui/core/Avatar';
import ArrowDropDownTwoToneIcon from '@material-ui/icons/ArrowDropDownTwoTone';
import ArrowDropUpTwoToneIcon from '@material-ui/icons/ArrowDropUpTwoTone';
import LocalOfferTwoToneIcon from '@material-ui/icons/LocalOfferTwoTone';
import Chip from '@material-ui/core/Chip';
import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
import VisibilityIcon from '@material-ui/icons/Visibility';
import Logo from '../images/action.png'
import { BodyData }  from '../components/HomeDataContainer'

export default function HomeRecentQuestion(props) {
    const classes = useStyles()
    const data = props.value
     let count = 0
    return (
        
        data.map(content => {
            let count = content.tags.split(',')
            return (
                <h1>{content.id}</h1>
        
            )
          
        })
        
    )
}

how to resolve this 1:

Answer 1

Change your data state to this:

const [data,setData] = useState([])

Change useEffect to this:

useEffect(() =>{
   if(!data.length)
     fetch('/postsDrawer').then(res=> res.json())
        .then(result => { 
            setData(result)
            setload(false)
         })
},[data])

Change your component to this:

<HomeRecentQuestion value={data} />

Answer 2

You can try using below on the child component.

data && data.map(content => {
            let count = content.tags.split(',')
            return (
                <h1>{content.id}</h1>
        
            )
          
        })
    

Answer 3

you will change it state of types when you created like these: const [data, setData] = useState([]); just you can it than problem will close it.