When I pass array in a react functional component, it turns to an object

Question

Hi I have to pass array as props to a functional component. Show code snippet But it is converted to an object in the child component. Please look at the render function. When I pass array as {...figures} I don't get it as Array in the FBS component due to which I can't run map function on it. Whereas when I pass it as figures={figures}, I get an array. I want to pass it as {...figures}. Please help Please look at my code for better understanding. here JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

You need to have additional object which will have pair of key and value which will be destructured as your props to the React Component. const props = { figures, // shorter way of writing figures: figures // Any other objects you'd like to pass on as props } and then, you can do: Updated Code Basically you can only destructure an object in the React Component because then the destructured object's key-value pairs will become props to the component. For better understanding, const arr = [{ a: 'a'}] {...arr} will give: { 0: {a: 'a'} } because 0 is the key as it is an array as opposed to an object, so what you were really doing was passing a prop with name 0 instead of figures and figures was undefined and hence the error.