Cannot read property 'map' of undefined in react while passing through props - reactjs

Question

I am building simple react application it showing map is undefine please resolve this error it might help a lot
child code
const classes = useStyles()
const {qnsObject,answersList} = props.value
console.log(qnsObject,answersList)
return (
qnsObject.map((content,index) =>{
let count = content.tags.split(',')
return (
<div className = {classes.homeRecentQns} >
<div className ={classes.homeRecentQnsParent}>
<div className = {classes.avatar_parent}>
<div className ={classes.avatar}>
<Avatar alt='tfds' src ={content.profile_img} className
= {classes.small}>{content.firstName[0].toUpperCase()}</Avatar>
</div>
<div className ={classes.voted_parent}>
<ArrowDropUpTwoToneIcon className =
{classes.voted_up}/>
<p>125</p>
<ArrowDropDownTwoToneIcon className =
{classes.voted_down}/>
</div>
</div>
<div className ={classes.recentQns_parent}>
<div className = {classes.recentQns_tags_parent}>
<p className = {classes.recentQns_name}>
{content.firstName} {content.lastName}</p>
<p className = {classes.recentQns_occupation}>
{content.currentWorking}</p>
<p className = {classes.recentQns_askedIn}><b
className = {classes.recentQns_askedIn_bold}>Asked in:
</b>{content.posted_date}</p>
</div>
<div className ={classes.recentQns_desc}>
<p className ={classes.recentQns_title}>
{content.qnsTitle}</p>
<p className ={classes.recentQns_answers}>
{ReactHtmlParser(content.Question_body)}
</p>
</div>
<div className ={classes.recentQns_topic_tags}>
{content.tags.split(',').map(chip =>{
return <> <Chip label={chip} variant="filled"
color="primary" size="small" icon=
{<LocalOfferTwoToneIcon />} /></>
})}
</div>
<div className ={classes.recentQns_views_parent}>
<div className = {classes.popular_desc_view}>
<QuestionAnswerIcon className =
{classes.views_icon}/>
<div className = {classes.p}>
{answersList.length} Answers</div>
</div>
<div className = {classes.popular_desc_view}>
<VisibilityIcon className =
{classes.views_icon}/>
<div className = {classes.p}>5 views</div>
</div>
</div>
</div>
</div>
</div>
)
})
)
parent code
const Auth = useContext(Authapi)
const [body,setBody] = useState("")
const [open, setOpen] = React.useState(false);
const [dataQns,setDataqns] = useState([])
const [closeAns, setAns] = React.useState(false);
let href = window.location.href.split('/')
console.log(dataQns)
const classes = useStyles()
useEffect(() =>{
const get = async () =>{
const data = await fetch('/getAnswers/'+href[href.length -1])
const dataItems = await data.json()
console.log(dataItems)
setDataqns(dataItems)
}
get()
},[dataQns])
this props I passing
<ViewPostComponent value = {dataQns}/>
how to get update when new data is ready to render using hooks please answer to this question
how to update map function when new data getting from server

Answer 1

map is undefined means that you have not passed any data to the map() function

Answer 2

You can use content loading before api call
{!!dataQns ? (<ViewPostComponent value = {dataQns}/> ) : (<SomeLoadingSvgAnimationComponent>) }

Answer 3

Probably you are mapping an empty array or a variable that is not an array.
You can check the length before mapping.
{
variable.length > 0 && variable.map((e) => your code )
}
Update
Instead of using just a variable, you need to use React State.
When data is loaded, set the data into the state and everything will work.

Answer 4

{qnsObject && qnsObject.map((content,index)........}
Try this while mapping. Mapping will occur only when qnsObject is an array else it will return null.