Accessing group of data after fetching data from API with reactjs - reactjs

Question

I am learning react and stumbled on something that seems like an absolute beginner problem. Anyway I am fetching data from an API and would like to know how to get a certain element from the JSON. I have tried different variations with [0] but with no success.
here is .json:
{
"data": [
{
"id": 68,
"name": "Umrah bersama Da'i Hadhari",
"duration": "12D10N",
"slug": "umrah-bersama-dai-hadhari-november-disember",
"type": "umrah",
"isPublished": true,
"isHighlighted": true,
"promoStatus": null,
"tourCode": null,
"displayName": "Umrah bersama Da'i Hadhari",
},
{
"id": 70,
"name": "Umrah bersama Da'i Fuad",
"duration": "12D10N",
"slug": "umrah-bersama-dai-fuad-2018",
"type": "umrah",
"isPublished": true,
"isHighlighted": true,
"promoStatus": null,
"tourCode": "UGOCT18-ECON",
"displayName": "Umrah bersama Da'i Fuad",
},
{
"id": 45,
"name": "Umrah Super Ekonomi - Disember",
"duration": "12D10N",
"slug": "ugdec18-umrah-disember-cuti-sekolah",
"type": "umrah",
"isPublished": true,
"isHighlighted": true,
"promoStatus": null,
"tourCode": "UGOCT18 - P/FB",
"displayName": "Umrah Super Ekonomi - Disember",
},
{
"id": 47,
"name": "Umrah Super Ekonomi - November",
"duration": "12D10N",
"slug": "ugnov18-p-fb-umrah-november-cuti-sekolah-musim-sejuk",
"type": "umrah",
"isPublished": true,
"isHighlighted": true,
"promoStatus": null,
"tourCode": "UGNOV18 - S.ECON",
"displayName": "Umrah Super Ekonomi - November",
},
]
}
here is my code:
class PackageDetails extends React.Component {
constructor (props) {
super (props);
this.state = {
data: [],
}
}
componentDidMount () {
fetch ('http://localhost/sampleData.json')
.then ((Response) => Response.json())
.then ((findresponse) => {
console.log(findresponse.data[0])
this.setState({
data:findresponse.data[0],
})
})
}
render () {
return (
<div>
<Navigation/>
<Breedcrumbs/>
<section className="section-highlight">
<div className="container">
{
this.state.data.map((dynamicData,i) =>
<ContentHighlight
name={dynamicData.name}
packageType={dynamicData.packageType}
highlight={dynamicData.highlight}
/>
)
}
</div>
</section>
</div>
)
}
}
export default PackageDetails;
I just want to access the the first set of the data. it's working on console.log but not on this.setState.
please help me on this. thanks

Answer 1

this.state.data.map iterates through an array. Since this.state.data is an object, please use it directly like so:
<ContentHighlight
name={this.state.data.name}
packageType={this.state.data.packageType}
highlight={this.state.data.highlight}
/>