What could be the reason for the individual components not being populated within the listItem?

*** 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;
}

Answer №1

    import ReviewList from "./components/ReviewList";
    import ReviewStatus from "./components/ReviewStatus";
    import Navigation from "./components/Navigation";
    import reviewData from "./data/reviews";
    
    function MainApp() {
      return (
        <div className="MainApp">
         <Navigation/>
         <ReviewStatus reviews={reviewData}/>
         <ReviewList reviewData={reviewData}/> 
        </div>
      );
    }
    
    export default MainApp;


function ReviewList(props) {
  const [reviews, setReviews] = useState(props.reviewData);

  return (
    <div className="reviewList">
      <div className="imgcontainer">
        <img
          className="reviewImage"
          src="https://example.com/image.png"
          alt="review"
        />
      </div>
      <div className="showReviews">
        {reviews.map((item) => (
          <ReviewItem key={item.id} item={item} />
        ))}
      </div>
    </div>
  );
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing MySQL queries through JavaScript functions

I need to create a PHP function that I can use in my JavaScript code. The issue I'm facing is that the variables from the beginning of the file are not recognized in the JavaScript block. <!DOCTYPE html> <?php include 'pdo_connect.php&a ...

Error message: When attempting to create dynamic inputs in React, an error occurs stating that instance.render is not

I encountered an issue while attempting to create dynamic inputs in React. The error message 'TypeError: instance.render is not a function' keeps popping up. import React, { Component } from 'react'; import Input from '../../Ui/Inp ...

What methods can I utilize to transmit Global variable data from a view to a controller?

In my Angular view file, I have the following code snippet. <!DOCTYPE html> <video id="myVideo" class="video-js vjs-default-skin"></video> <script> var dataUri; var videoData; var player = videojs("myVideo", { controls ...

Tips for aligning the timing of two CSS animations

I'm struggling to achieve a synchronized CSS animation where a progress bar fills up and a background changes simultaneously. For example, I want the progress bar to fill in 5000ms, with the background image changing every 5000ms as well. Despite se ...

Caution: The `id` property did not match. Server: "fc-dom-171" Client: "fc-dom-2" while utilizing FullCalendar in a Next.js environment

Issue Background In my current project, I am utilizing FullCalendar v5.11.0, NextJS v12.0.7, React v17.0.2, and Typescript v4.3.5. To set up a basic calendar based on the FullCalendar documentation, I created a component called Calendar. Inside this comp ...

adjusting the width of an HTML table cell

I'm struggling with the code below: <table> <thead> <th class='1'>Date</th> <th class='2'>Start Time</th> <th class='3'>End Time </th> <th class='4 ...

Angular allows you to easily upload multiple files at once

I am currently facing an issue while attempting to upload multiple files. There seems to be an error somewhere in my code that I have yet to identify. The problem is that nothing is being displayed in the console, but the 'uploadData' appears to ...

IE encountered an invalid character

While working on a JavaScript function, I encountered an issue with a string variable. Specifically, when running the page in IE with this script, I receive an error message indicating an invalid character at the following line: let displayString = `${s ...

Issue with updating state in child component preventing addition to state

Recently, I made the switch to TypeScript in my NextJS project using Create T3 App. One of the components in my app involves updating the state after a Prisma mutation is performed. I attempted to pass the setItems (which was initialized with useState) to ...

What could cause the cookie value in the dynamic route to differ?

After implementing a program with next js, I encountered an issue related to using cookies on dynamic pages. The problem is that the cookie value seems to be shared across different pages, when in fact each page should have its own unique cookie. My goal ...

What's the best way to ensure that columns clear properly when using bootstrap?

Instead of providing code to solve an issue, I am using Bootstrap and encountering problems with the roster section where the heights are inconsistent. My temporary solutions involved adding classes to specific divs or setting fixed column heights, but I&a ...

The error message "Property 'data1' is not a valid property on the object type {}"

const Page: NextPage = ({data1}:{data1:any}) => { const [open, setOpen] = React.useState(false); const [data, setData] = React.useState(data1); const handleAddClick = () => { setOpen(true); }; ..... } export async function getServerS ...

Do we need a peer dependency specifically for TypeScript typings or is it optional?

My TypeScript library includes a React component, and one of the optional features allows users to pass an instance of a Redux store as a prop for Redux integration. <Component reduxStore={store}></Component> Since this feature is optional, I ...

Issue with setting cookies using res.cookie

Currently, I am in the process of setting up a Node/Express application with a React client for interaction. I have configured passport to manage authentication using JWT. Upon user login, I verify the email and password, then set the cookie: res.cookie(& ...

Does adding the Angular bootstrap script at the end of the body tag impact webpage speed more than using ng-app on the body tag?

In the past, we had placed ng-app on the body tag which led to problems with dependency injection when multiple modules were being used on the same webpage. This required module creators to be aware of the existing app and inject their app into it. We are ...

Utilize AngularJS to bind a variable and display an external HTML file without the need to open it in a browser

In my setup, I have two HTML Views - one is for application purposes and the other is for printing. Let's call them Application.html and PrintForm.html, respectively. Here is a snippet from Application.html: <!DOCTYPE html> <html> < ...

What is the best way to incorporate JSX into JavaScript while also enabling callback functionality?

Given var data = { value: <input type="text" value="Reg" onChange={this.handleValueChange}/> }; var RawDataTable = React.createClass({ generateTable() { <td className="myColumnStyle"> {data.value} </td> ...

retrieve HTML content by its ID stored in a variable

In my JavaScript code, I have a variable named "value" that contains HTML data. I am trying to extract the data from a specific ID that is located within the element with ID #myDiv. var value="<div > <p class="">Hi <a href="/ ...

Exploring jQuery: Moving between different table cells using traversal techniques

Seeking assistance from experienced jQuery users as I am new to this library and may not be approaching this task correctly. I have a dynamically generated HTML table that is quite extensive. To enhance user experience, I aim to assign navigation function ...

AngularJS and Select2's Multiple - Tags feature can display tags intermittently, showing some and hiding others as needed

Currently, I am implementing AngularJS along with select2 (not using ui-select). In my view, the following code is present: <select name="rubros" id="rubros" class="select2 form-control" ng-model="vm.comercio.tags" ng-options="rubro.nombre for rub ...