Experimenting with hooks as they seem way less confusing than classes. setState is stored in the userReviews variable and the state is set to a data file which is basically an array of objects. The state is there, but when I use the map method to render my jsx to the page there is nothing to be found. Whats going wrong and how can I fix this.
component:
import React, {useState} from 'react';
import data from './data';
import InputReviews from './InputReviews.js';
const Reviews = () => {
const [userReviews] = useState(data)
return (
<div>
{userReviews.map( () => (
<div>
<h4>{userReviews.name}</h4>
<h4>{userReviews.date}</h4>
<h4>{userReviews.rating}</h4>
<p>{userReviews.review}</p>
</div>
))}
<InputReviews />
</div>
)
}
export default Reviews;
screenshot of state in my reviews component:
