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?
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.