Estoy usando react-redux y tengo algo como esto en mi código:
<div> {episode.charactersList.map((id) => { const character = characters.find( (el) => String(el.id) === String(id) ); return ( <div key={uuidv4()}> {character ? ( <Link to={`/users/${character.id}`}> {" "} {character.name}{" "} </Link> ) : ( <div key={id}> none</div> )} </div> ); })} </div> El problema con este código es que cuando elimino uno de los caracteres, aparece <div> none </div> . No sé cómo deshacerme de esto ya que tengo que usar { character ? ( ...... ) . Si omito esta línea de código, la página se muestra antes de que se carguen los datos y aparece un error de character indefinido.
Para resolver el problema, puede probar un valor válido de character antes de su declaración de return y anular la representación del carácter devolviendo null . Por ejemplo:
<div> {episode.charactersList.map((id) => { const character = characters.find( (el) => String(el.id) === String(id) ); if (!character) { return null; } return ( <div key={uuidv4()}> <Link to={`/users/${character.id}`}> {" "} {character.name}{" "} </Link> </div> ); })} </div>