Map through the data, if matching ID found in two arrays then render second array, otherwise render generic data

Question

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

Answer 1

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>
  );

sandbox