1494a50123
* fix: restructure certifications guide articles * fix: added 3 dashes line before prob expl * fix: added 3 dashes line before hints * fix: added 3 dashes line before solutions
55 lines
1.1 KiB
Markdown
55 lines
1.1 KiB
Markdown
---
|
|
title: Pass an Array as Props
|
|
---
|
|
# Pass an Array as Props
|
|
|
|
---
|
|
## Problem Explanation
|
|
To pass an array as a prop, first an array must be declared as a "tasks" prop on each of the components to be rendered:
|
|
|
|
|
|
---
|
|
## Solutions
|
|
|
|
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
|
|
|
```javascript
|
|
const List = props => {
|
|
return <p></p>;
|
|
};
|
|
|
|
class ToDo extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
render() {
|
|
return (
|
|
<div>
|
|
<h1>To Do Lists</h1>
|
|
<h2>Today</h2>
|
|
<List tasks={["Walk", "Cook", "Bake"]} />
|
|
<h2>Tomorrow</h2>
|
|
<List tasks={["Study", "Code", "Eat"]} />
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
Then, the props must be handled inside the "List" component:
|
|
|
|
```javascript
|
|
const List = props => {
|
|
return <p>{props.tasks.join(", ")}</p>;
|
|
};
|
|
|
|
// ... same as above
|
|
```
|
|
|
|
#### Code Explanation
|
|
|
|
* The `.join(", ")` method is used to take each element from within the array and join them into a string to be displayed.
|
|
* We are using the modularity of React in this example to display the tasks passed by two different components to a common component which renders the final HTML.
|
|
</details>
|
|
|