将 state 数据传递给另一个反应组件

Question

So, I'm trying to pass array of data to another component, the component is FeedbackList.jsx

import React from "react";
import FeedbackItem from "./FeedbackItem";

function FeedbackList({ feedback }) {
  if (!feedback || feedback.length === 0) {
    return <p>No Feedback</p>;
  }
  return (
    <div className="feedback-list">
      {feedback.map((item) => (
          <FeedbackItem key={item.id} item={item.item} />
      ))}
    </div>
  );
}

export default FeedbackList

the reason why I use FeedbackItem to map each data above is because I want to use styles from FeedbackItem component, this is the FeedbackItem

import React, { useState } from "react";

function FeedbackItem() {
  const [rating, setRating] = useState(7);
  const [text, setText] = useState('Feedback Item')

  // const handleClick = () => {
  //     setRating(10)
  // }

  return (
    <div className="card">
      <div className="num-display">{rating}</div>
      <div className="text-display">{text}</div>
    </div>
  );
}

export default FeedbackItem;

this is FeedbackData that contain the array of data that i want to show in FeedbackList

const FeedbackData = [
  {
    id: 1,
    rating: 5,
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed iaculis justo. Aliquam accumsan tempus lobortis. Praesent at nulla eleifend urna ultricies placerat. Vivamus efficitur, sem in cursus iaculis, massa nibh fringilla urna, a fringilla nisi elit vel ligula. Aenean viverra justo auctor mi lacinia dapibus. Quisque vel sem faucibus odio aliquam pretium et consequat magna. Sed felis libero, porttitor non viverra non, aliquet eget lectus. Quisque dictum tellus in mi lacinia molestie. In ullamcorper urna risus, eu sollicitudin diam tempor in.",
  },
  {
    id: 2,
    rating: 15,
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed iaculis justo. Aliquam accumsan tempus lobortis. Praesent at nulla eleifend urna ultricies placerat. Vivamus efficitur, sem in cursus iaculis, massa nibh fringilla urna, a fringilla nisi elit vel ligula. Aenean viverra justo auctor mi lacinia dapibus. Quisque vel sem faucibus odio aliquam pretium et consequat magna. Sed felis libero, porttitor non viverra non, aliquet eget lectus. Quisque dictum tellus in mi lacinia molestie. In ullamcorper urna risus, eu sollicitudin diam tempor in.",
  },
  {
    id: 3,
    rating: 7,
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed iaculis justo. Aliquam accumsan tempus lobortis. Praesent at nulla eleifend urna ultricies placerat. Vivamus efficitur, sem in cursus iaculis, massa nibh fringilla urna, a fringilla nisi elit vel ligula. Aenean viverra justo auctor mi lacinia dapibus. Quisque vel sem faucibus odio aliquam pretium et consequat magna. Sed felis libero, porttitor non viverra non, aliquet eget lectus. Quisque dictum tellus in mi lacinia molestie. In ullamcorper urna risus, eu sollicitudin diam tempor in.",
  },
]

export default FeedbackData

and this is my App.js, when I use React Devtools extension to view the app hooks state, the FeedbackData shows up but it won't display in the FeedbackItem, it says "No Feedback" when in fact there are Feedback data

import Header from "./components/Header";
import FeedbackList from "./components/FeedbackList";
import {useState} from 'react'
import FeedbackData from "./data/FeedbackData";
import FeedbackItem from "./components/FeedbackItem";

function App() {
  const [data, setdata] = useState(FeedbackData)


  return (
    <>
      <Header />
      <div className="container">
        <FeedbackList />
      </div>
    </>
  );
}


export default App;

Answer 1

function App() {
  const [data, setdata] = useState(FeedbackData)


  return (
    <>
      <Header />
      <div className="container">
        <FeedbackList data={FeedbackData}/>
      </div>
    </>
  );
}


export default App;


function FeedbackList({ feedback }) {
  if (!feedback || feedback.length === 0) {
    return <p>No Feedback</p>;
  }
  return (
    <div className="feedback-list">
      {feedback.map((item) => (
          <FeedbackItem key={item.id} item={item} />
      ))}
    </div>
  );
}

export default FeedbackList;

function FeedbackItem = (props) => {
  const [rating, setRating] = useState(7);
  const [text, setText] = useState('Feedback Item');

  const {item} = props;

  // const handleClick = () => {
  //     setRating(10)
  // }

  return (
    <div className="card">
      <div className="num-display">{item.rating}</div>
      <div className="text-display">{item.text}</div>
    </div>
  );
}

export default FeedbackItem;