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.
import React from "react"; import { render } from "react-dom"; const App = () => { const FBS = ({ figures }) => { console.log(typeof figures); return figures.map((item, key) => <p key={key}>{item.description}</p>); }; const figures = [ { config: 112, description: "description text 1" }, { config: 787, description: "description text 2" } ]; return ( <div> {/* <FBS {...figures} /> */} <FBS figures={figures} /> </div> ); }; render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <body> <div id='root' /> </body>
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
2 answers
solution1
1 2019-03-22 14:13:14
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:
<FPS {...props} />
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.
solution2
0 2019-03-22 14:41:56
You can use something like this:
import React from "react";
import Figure from './Figure';
import { render } from "react-dom";
const App = () => {
const figures = [
{
config: 112,
description: "description text 1"
},
{
config: 787,
description: "description text 2"
}
];
return (
<div>
{
figures.map((figure, key) => {
return <Figure key={key} {...figure}/>
})
}
</div>
);
};
render(<App />, document.getElementById("root"));
And create a component called Figure like this:
import React from "react";
const Figure = (props) => {
return (
<div>
<p>{props.description}</p>
<p>{props.config}</p>
</div>
);
};
export default Figure;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.