*** I am iterating through an array and calling the ListItem component for each item. However, only one ListItem is being populated when there should be 3. Can someone please help me figure out what's wrong?
*** Here is my code in App.js ***
import FeedbackList from "./components/FeedbackList";
import FeedbackStatus from "./components/FeedbackStatus";
import Header from "./components/Header";
import feedbackData from "./data/feedback";
function App() {
return (
<div className="App">
<Header/>
<FeedbackStatus feedback={feedbackData}/>
<FeedbackList/>
</div>
);
}
export default App;
*** This is my FeedbackList component, where I iterate through feedbackData and call the FeedbackItem component for each item passed as a prop ***
import React from "react";
import FeedbackItem from "./FeedbackItem";
import { useState } from "react";
import feedbackData from "../data/feedback";
function FeedbackList() {
const [feedback, setFeedback] = useState(feedbackData);
return (
<div className="feedbackList">
<div className="imgcon">
<img
className="feedbackimage"
src="https://png.pngtree.com/png-clipart/20220930/original/pngtree-customer-reviews-with-people-giving-star-ratings-on-a-mobile-phone-png-image_8644419.png"
alt="feedback"
/>
</div>
<div className="showfeedback">
{feedback.map((item) => (
<FeedbackItem key={item.id} item={item} />
))}
</div>
</div>
);
}
export default FeedbackList;
*** My feedbackData *** const feedbackData = [
{
id: 1,
rating: 10,
text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. consequuntur vel vitae commodi alias voluptatem est voluptatum ipsa quae.',
},
{
id: 2,
rating: 9,
text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. consequuntur vel vitae commodi alias voluptatem est voluptatum ipsa quae.',
},
{
id: 3,
rating: 8,
text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. consequuntur vel vitae commodi alias voluptatem est voluptatum ipsa quae.',
},
]
export default feedbackData
*** This is my FeedbackItem component, where I receive item as a prop ***
import React from 'react'
function FeedbackItem({item}) {
return (
<div className='feedbackItem'>
<p className='rating'> {item.rating}</p>
<p className='review'></p>
</div>
)
}
export default FeedbackItem
*** Here is my CSS if it helps ***
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
background-color: rgb(9, 154, 154);
line-height: 1.6;
}
.heading{
text-align: center;
color: white;
max-width: 768px;
margin: auto;
padding: 0 20px;
}
.feedbackList{
display: flex;
height: 100vh;
}
.imgcon{
flex: 4;
justify-content: center;
align-items: center;
}
.showfeedback{
flex: 6;
}
.feedbackimage{
object-fit: cover;
width: 600px;
height: 600px;
margin-left: 100px;
margin-top: 100px;
background-attachment: fixed;
}
.feedbackItem{
border-radius: 20px;
background-color: aquamarine;
width: 50vw;
height: 20vh;
position: absolute;
margin-top: 110px;
margin-left: 50px;
margin-bottom: 50px;
}
.review{
text-align: center;
font-weight: 900;
margin: 10px 5px 5px 5px ;
color:#fff;
}
.rating{
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
width: 30px;
height: 30px;
background-color: rgb(251, 221, 51);
text-align: center;
position: relative;
top: 5px;
left: 5px;
vertical-align: middle;
color: black;
}
.states{
display: flex;
justify-content: space-between;
align-items: center;
}
.states :nth-child(1){
margin-left: 20px;
}
.states :nth-child(2){
margin-right: 20px;
}