a bit stuck with array methods. I'm given two arrays
Steps array:
const steps = [
{
id: 1,
name: "Step 1",
description: "Description 1"
},
{
id: 2,
name: "Step 2",
description: "Description 2"
},
{
id: 3,
name: "Step 3",
description: "Description 3"
}
];
Val array:
const val = [
{
id: 1,
a: 2,
b: 1,
c: 5
},
{
id: 2,
a: 2,
b: 2,
c: 1
},
{
id: 5,
a: 0,
b: 0,
c: 0
}
];
What I have here is 3 objects in the Steps array and three objects in the val array. I would like to render all steps and then render val array only if ID's are matching, if not then use 0's instead (so with the example the last step would get val.a: 0, val.b: 0, val.c: 0)
Here's what I got:
<div className="App">
{steps.map((step) => (
<div style={{ marginBottom: "20px" }}>
<div className="step-name">{step.name}</div>
<div className="step-name">{step.description}</div>
{val
.filter((value) => value.id === step.id)
.map((value) => (
<>
<div>value a: {value.a}</div>
<div>value b: {value.b}</div>
<div>value c: {value.c}</div>
</>
))}
</div>
))}
</div>
With the current piece it only renders values if the ID's are matching, I am missing the part where it should render 0's for the steps that matching id's are not found.
Also codesandbox link: Codesandbox
The issue with your code is that when no match is found the filtered array is an empty array with no elements to map on.
you can do something like creating a function which returns the filtered array if found or returns an array of object with all 0's for a,b,c. This logic can be implemented inside the render as well but this way much cleaner and less messy
const filteredArr = (step) => {
const arr = val.filter((value) => value.id === step.id)
return arr.length>0? arr : [{id: step.id, a:0,b:0,c:0}]
}
then you can call this inside your render
return (
<div className="App">
{steps.map((step) => (
<div style={{ marginBottom: "20px" }}>
<div className="step-name">{step.name}</div>
<div className="step-name">{step.description}</div>
{filteredArr(step)
.map((value) => (
<>
<div>value a : {value.a}</div>
<div>value b : {value.b}</div>
<div>value c : {value.c}</div>
</>
))}
</div>
))}
</div>
);