Extract a list of items/props within an array to be rendered based on id - mapping

Question

I'm trying to create web templates using React.js, and have an array where I list different content fragments (based on which page is rendered). I'm struggling to understand how to use a combination of filter and map in order to extract the relevant parts of the array.
At the moment, I'm trying to use the id (although being able to use the pathname would be ideal) and have the following:
// My Array
const Top = [
{
id: 1,
path: "/myfirstpath",
title: "My First Title",
content1: "Some first content",
content2: "some more first content",
},
{
id: 2,
path: "/mysecondpath",
title: "My Second Title",
content1: "Some second content",
content2: "Some more second content",
}
]
export default Top;
What I'd like to be able to do is pull out everything that's in the id: 1 object, and render it in this framework:
// My Content Framework
import React from "react";
function Content(props) {
return (
<div className= "container-top">
<section class="header">
<div class="wrapper">
<div class="title">
<h1>{props.title}</h1>
</div>
<div className="description">
<p>{props.content1}</p>
<p>{props.content2}</p>
</div>
</div>
</section>
</div>
)
}
export default Content;
Then, for another page, I'd like to do the same for id: 2, and so on.
And here's where I've got to so far:
// My Attempt to Populate My Content
function createContent(selectedObject) {
return (
<Content
key={selectedObject.id}
title={selectedObject.title}
content1={selectedObject.content1}
content2={selectedObject.content2}
/>
);
}
function renderedContent() {
return(
<div>{TopBox.filter("What goes in here?!")}</div>
)
}
export default renderedContent;
I've tried the following where I've written "What goes in here?!":
(selectedObject => selectedObject.id === "1").map(createContent)
(createContent => createContent.id === "1").map(createContent)
Apologies if the terminology I've used isn't correct - I'm quite new to all this!
Thanks for any advice you can lend.

Answer 1

You were actually quite close. You can use Array.filter(f => condition) to filter based on whatever property you need.
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
Where you probably went wrong was in (selectedObject => selectedObject.id === "1").map(createContent). In JavaScript 1 === '1' is false. Strict equality compares two values for equality. If the values have different types, the values are considered unequal.
In the example below, I use content.id === 1 as the filter condition (as per your question), and it displays the Content with id=1.
function Content(props) {
return (
<div className="container-top">
<section class="header">
<div class="wrapper">
<div class="title">
<h1>{props.title}</h1>
</div>
<div className="description">
<p>{props.content1}</p>
<p>{props.content2}</p>
</div>
</div>
</section>
</div>
);
}
function createContent(selectedObject) {
return (
<Content
key={selectedObject.id}
title={selectedObject.title}
content1={selectedObject.content1}
content2={selectedObject.content2}
/>
);
}
function App() {
const Top = [
{
id: 1,
path: '/myfirstpath',
title: 'My First Title',
content1: 'Some first content',
content2: 'some more first content'
},
{
id: 2,
path: '/mysecondpath',
title: 'My Second Title',
content1: 'Some second content',
content2: 'Some more second content'
}
];
const filterBy = (content) => content.id === 1; // <= use whatever prop/value
return <div>{Top.filter(filterBy).map(createContent)}</div>;
}
ReactDOM.render(<App />, document.getElementById("react"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
You can swap the id for pathname as well in the filterBy method.