Tengo una serie de resultados que quiero representar en una tabla:
const ScanOutput = () => ( <div class="results"> <h1> <b>Scan Results</b> </h1> <h3>{results.length} results returned</h3> <table class="styled-table"> <thead> <tr> <th>ID</th> <th>Name</th> </tr> </thead> <tbody> {results.map((result) => ( <tr> <td>{result.id}</td> <td>{result.name}</td> </tr> ))} </tbody> </table> </div> );Esto funciona, pero me gustaría agregar algunas funciones adicionales; por ejemplo, si no se devuelven resultados (p. ej., resultados. longitud == 0), me gustaría representar "No se encontraron resultados" en lugar de una tabla vacía. Además, también me gustaría hacer que con esta sección aquí:
<h3>{results.length} results returned</h3>Si solo se devuelve 1 resultado, representa esto en su lugar:
<h3>{results.length} result returned</h3>¿Cuál es la forma más limpia de hacer esto en React?
Puede renderizar condicionalmente.
<div class="results"> {result?.length > 0 ? <> <h1> <b>Scan Results</b> </h1> <h3>{results.length} results returned</h3> <table class="styled-table"> {...} </table> </> : <h1>No results found</h1> } </div>Puede crear un nuevo componente para la tabla de resultados
const ResultsTable = ({ results }) => { if (results?.length === 0) return <h3>No results found</h3>; if (results?.length === 1) return ...; return ( <table class="styled-table"> <thead> <tr> <th>ID</th> <th>Name</th> </tr> </thead> <tbody> {results.map((result) => ( <tr> <td>{result.id}</td> <td>{result.name}</td> </tr> ))} </tbody> </table> ) }