Tengo una lista de comentarios que obtengo de mi API con este aspecto. Un comentario tiene Me gusta y No me gusta junto con el usuario que publicó el Me gusta o No me gusta.
const comments = [ { id: 1, comment: "nice", author: "jenny", likes: [ { id: 1, user: "alice" }, { id: 2, user: "bob" } ], dislikes: [ { id: 3, user: "sam" } ] }, { id: 2, comment: "good job", author: "alice", likes: [ { id: 2, user: "bob" } ], dislikes: [ { id: 3, user: "sam" } ] } ]Digamos que Alice ha iniciado sesión.
Ahora el map para mostrar los comentarios funciona bien, pero quiero hacer un "mapa anidado" que recorra la matriz de objetos de "me gusta" y "no me gusta" dentro de la misma matriz de objetos y ver si el usuario de "me gusta" o "no me gusta" coincide con quién está conectado mostrar una confirmación.
Mi código actual:
const signedInUser = "alice"; return( Object.keys(comments).map((x, index) => { const com = comments[x]; <div className="comment" key={index}> <p>{com.author}</p> <p>{com.comment}</p> {com.likes.map((x) => { { x.user === signedInUser ? ( <p>You liked this</p> ) : ( <button>Like</button> ); } })} </div>; }) );Estoy haciendo esto con reaccionar, ya que estoy tratando de
Se supone que debe usar some para obtener una respuesta booleana si existe un me gusta del mismo usuario. respuesta de retorno del map para cada objeto en la matriz similar.
return( Object.keys(comments).map((x, index) => { const com = comments[x]; <div className="comment" key={index}> <p>{com.author}</p> <p>{com.comment}</p> {com.likes.some((x) => x.user === signedInUser)? ( <p>You liked this</p> ) : ( <button>Like</button> ); } </div>; }) );const renderLikeOrDislikeButton = (arr, text1, ) =>{ if(arr.some((x) => x.user === signedInUser)){ return <p>You {text1} this</p> } return <button>{text2}</button> } return( { Object.keys(comments).map((x, index) => { const com = comments[x]; return( <div className="comment" key={index}> <p>{com.author}</p> <p>{com.comment}</p> {renderLikeOrDislikeButton(com.likes, "liked", "Like")} {renderLikeOrDislikeButton(com.likes, "disliked", "Dislike)} </div> ) });