un poco atascado con los métodos de matriz. me dan dos arreglos
Matriz de pasos:
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" } ];Matriz de valores:
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 } ];Lo que tengo aquí son 3 objetos en la matriz Steps y tres objetos en la matriz val. Me gustaría representar todos los pasos y luego representar la matriz val solo si las ID coinciden, si no, entonces use 0 en su lugar (así que con el ejemplo, el último paso obtendría val.a: 0, val.b: 0, val.c: 0)
Esto es lo que obtuve:
<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>Con la pieza actual, solo genera valores si las ID coinciden, me falta la parte donde debería generar 0 para los pasos en los que no se encuentran las ID coincidentes.
También codesandbox enlace: Codesandbox
El problema con su código es que cuando no se encuentra ninguna coincidencia, la matriz filtrada es una matriz vacía sin elementos para mapear.
puede hacer algo como crear una función que devuelva la matriz filtrada si se encuentra o devuelva una matriz de objetos con todos 0 para a, b, c. Esta lógica también se puede implementar dentro del renderizado, pero de esta manera es mucho más limpio y menos desordenado.
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}] }entonces puedes llamar a esto dentro de tu 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> );