Soy nuevo en reaccionar y estoy usando una biblioteca de reacción de carbono. Me pregunto cómo puedo poner una declaración if en la función de mapa.
Simplemente escribe la declaración if como si fuera una cadena normal.
<StructuredListBody> {matchingResults?.map((X, i) => <StructuredListRow}> {if (X?.status.includes(Working)){ <StructuredListCell>{X?.status}</StructuredListCell>} else {<StructuredListCell>{X?.checking}</StructuredListCell>}}; </StructuredListRow> )} </StructuredListBody>--- información adicional Simplifiqué el código pero no puedo usar un operador ternario porque habrá más de 2 condiciones.
Es más como esto. Todavía no entiendo cómo devolver un componente específico en un componente. Estoy tratando de cambiar el color. Lo único que se me ocurrió es volver a usar lo mismo
<StructuredListBody> {matchingResults?.map((X, i) => <StructuredListRow key={`row-${row.id} -${i}`}> if (X?.status.includes(Working) { <StructuredListCell key={`cell-${row.id}} noWrap style={{paddingBottom: '.5rem', color: 'red'}}> {X?.status} </StructuredListCell>} else {<StructuredListCell key={`cell-${row.id} noWrap style={{paddingBottom: '.5rem', color: 'yellow'}}> {X?.status} </StructuredListCell>} )} </StructuredListBody>Hay un par de formas de tener declaraciones if en la parte render de un componente de reacción. Puede renderizar condicionalmente diferentes componentes basados en alguna lógica como la siguiente:
<StructuredListBody> {matchingResults?.map((X, i) => { if (X?.status.includes(Working)) { return ( <StructuredListRow> <StructuredListCell>{X?.status}</StructuredListCell> </StructuredListRow> ); } else { return ( <StructuredListCell>{X?.checking}</StructuredListCell> ); } })} </StructuredListBody>O podría hacer la lógica dentro del componente:
<StructuredListBody> {matchingResults?.map((X, i) => ( <StructuredListCell> {X?.status.includes(Working) ? X?.status : X?.checking} </StructuredListCell> ))} </StructuredListBody>Como la única diferencia en la representación es el contenido del componente StructuredListCell . La forma más fácil para su caso sería usar el operador ternario (?), además, los accesorios clave deben ser únicos, usé el índice aquí, pero debe usar algo único en su estructura de datos.
<StructuredListBody> {matchingResults.map((X, i) => ( <StructuredListRow key={i}> <StructuredListCell>{X?.status.includes(Working) ? X?.status : X?.checking}</StructuredListCell> </StructuredListRow> ))} </StructuredListBody>Leer más sobre Renderizado Condicional en React