{details.map((val, colorMap, prodName) => {Aquí es donde estoy un poco perdido con su declaración condicional.
if( colorMap < 10 ){ return ( <ul> <li key={prodName}><p className="pt-2">{val.prodName} </p></li> <li><p className="pt-2">{}</p></li> </ul> ); } return null;Supongo que parece haber confusión allí, en lugar de desestructurarse en la declaración del map , está pasando 3 argumentos, lo que hace que salga mal ...
En la declaración del mapa, hágalo de esta manera:
function mapperRender() { details.map(({val, colorMap, prodName}) => { if( colorMap < 10 ){ return ( <ul> <li key={prodName}><p className="pt-2">{val.prodName} </p></li> <li><p className="pt-2">{}</p></li> </ul> ); } return null; } }y luego en el jsx:
<div> {mapperRender()} </div>Inicialmente, desea filter aquellos objetos que tienen un valor de colorMap inferior a 10, y luego necesita map sobre esos elementos filtrados.
En este ejemplo, he agregado los datos al estado. Luego filtré los datos y usé esos datos para crear los elementos de la lista.
const { useState } = React; // Pass in the data function Example({ data }) { // Add the data to state const [ state, setState ] = useState(data); // `filter` all the objects where the // colorMap is less than 10 into a new array function getFiltered(data) { return data.filter(obj => { return obj.colorMap < 10; }); } // Return an array of mapped JSX list items function createJSX(filtered) { return filtered.map(obj => { return <li key={obj.val}>{obj.prodName}</li> }); } // `filter` the data in state... const filtered = getFiltered(state); // ...and use that to create the JSX return ( <ul>{createJSX(filtered)}</ul> ); } const data=[{val:1,colorMap:2,prodName:"Shoe"},{val:14,colorMap:14,prodName:"Bobby Davro"},{val:3,colorMap:3,prodName:"House"},{val:34,colorMap:34,prodName:"Barney"}]; ReactDOM.render( <Example data={data} />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>