How to print response Json data in jsx - reactjs

Question

I want to render title and description in jsx (Reside in data-->feed->title or Description)
also want to render each title and each pub date (Reside in data->items[array]->title and pub date)
import React,{useState,useEffect} from 'react'
import axios from 'axios';
function Dashboard(){
const[posts,setPosts] = useState([])
useEffect(()=>{
axios.get('https://api.rss2json.com/v1/api.json?rss_url=http%3A%2F%2Frss.cnn.com%2Fservices%2Fpodcasting%2Fstudentnews%2Frss.xml')
.then(res=> {
console.log(res)
setPosts(res.data)
})
.catch(err=>{
console.log(err)
})
},[])
return(
<div className="App">
</div>
)
}

Answer 1

may be you are trying to do something like this ?
return(
<div className="App">
<div> {posts.feed && posts.feed.title} </div>
<div> {posts.feed && posts.feed.description} </div>
<div>
{posts.items && posts.items.map ( postItem => <div> {postItem.title} </div> ) }
</div>
</div>
)

Answer 2

So first of all I suggest you to make your screens class components, than you can make your child components as functional components like above. So you can make a async function that make a request and fetches the data to the state.
Why you getting cannot read property of "title"?
Becouse when you load your component It's instantly looking for your posts array. Which is empty at the begining It need some time to make request and fill your array with the recieved data, that's why you getting this error I believe.
So just try it like following
{posts.length && post.map .... .... ...

Answer 3

Try it like :
return(
<div className="App">
{
(posts.items!==undefined && posts.items.length>0) && posts.items.map ( ele=> {
return (<div>{ele.title} - {ele.pubDate} </div> )})
}
</div>
)