Hi I have to pass array as props to a functional ponent.
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=".6.3/umd/react.production.min.js"></script>
<script src=".6.3/umd/react-dom.production.min.js"></script>
<body>
<div id='root' />
</body>Hi I have to pass array as props to a functional ponent.
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./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./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 ponent. Please look at the render function. When I pass array as {...figures} I don't get it as Array in the FBS ponent 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
Share Improve this question asked Mar 22, 2019 at 14:03 RickieRickie 6513 gold badges11 silver badges21 bronze badges 4-
1
Maybe
{ [...figures] }? – Pointy Commented Mar 22, 2019 at 14:04 - The codesandbox works perfectly for me. – Vladimir Bogomolov Commented Mar 22, 2019 at 14:06
-
As Vladimir said, the codesandbox work just fine.. Moreover, if you write
console.log(Array.isArray(figures));it returnstrue– Jolly Commented Mar 22, 2019 at 14:07 -
1
It works alright, but what OP is wanting is imo, the same behavior when
figures={figures}is changed to just{...figures}– Amit Joki Commented Mar 22, 2019 at 14:09
2 Answers
Reset to default 3You 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} />
Updated Code
Basically you can only destructure an object in the React Component because then the destructured object's key-value pairs will bee props to the ponent.
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.
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 ponent 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;