无法将数组作为道具传递给反应组件并渲染它

Question

Problem: I want to pass a array to QuizResult component and need to display it in

tag.

Code:

markedAnswers = [0,1,2,3,1,1,4,4]
<QuizResult result={markedAnswers}/>

const QuizResult = (result) => {
  return (
    <div className="result-screen">

      {result.map((data, index) => <p key={index}> {data}</p>)} - result.map is not a function error

      <div>{result}</div>  - no error, empty div is shown

    </div>
  );
};

export default QuizResult;

What i am missing here?

Answer 1

In this case:

const QuizResult = (result) => {

The result variable is an object containing all of the passed props. So you'd refer to result.result for the array. Instead, destructure the props in the function:

const QuizResult = ({result}) => {

Then result would contain just the array.