En un proyecto ReactJS tengo la siguiente matriz de objetos:
const arr = [ { key1: 1, key2: 'value1' }, { key1: 2, key2: 'value2' }, { key1: 3, key2: '' // empty string, therefore I do not want to pass this object in the array to be passed to the prop } ]Y estoy pasando la matriz anterior a un accesorio de la siguiente manera:
<Component Array={arr} />No quiero pasar ningún objeto con la tecla 'b' siendo una cadena vacía (como el segundo objeto según el ejemplo).
¿Hay alguna manera de que pueda pasar el resto de los objetos como una matriz sin el objeto cuya clave 'b' tiene una cadena vacía?
Puede pasar una matriz filtrada al componente que no contiene objetos donde key2 es una cadena vacía:
<Component Array={arr.filter(({key2}) => key2 !== "")} />Ejemplo de reacción a continuación:
function App() { const items = [ { key1: 1, key2: "value1" }, { key1: 2, key2: "value2" }, { key1: 3, key2: "" }, ]; return <List items={items.filter(({ key2 }) => key2 !== "")} />; } function List({ items }) { return ( <ul> {items.map((item) => ( <li>{JSON.stringify(item, null, 2)}</li> ))} </ul> ); } ReactDOM.render(<App />, document.getElementById("root")); <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>