1

tengo un objeto users que al llamarlo me devuelve esto:

console.log(users)
> Array(2)
 0: {id: 1, username: 'Agustin', vote: 'Waiting for vote...'}
> 1: {id: 2, username: 'Elias', vote: 'Waiting for vote...'} length: 2
> [[Prototype]]: Array(0)

me gustaria realizarle un map para renderizar un componente para cada persona de esta manera

<Person name={username} vote={vote}>

Como puedo hacer? ya probe de todas las maneras posibles y no hay resultado

Edit: Users viene desde el backend

  io.on("connection", async (socket)=> {
  console.log(`User Connected: ${socket.id}`);
  let personas=await pool.query("select * from people");
  var respuestaJson=JSON.parse(JSON.stringify(personas))

  socket.emit('send-data',respuestaJson);

Frontend

const [users, setUsers] = useState({})
     

      useEffect(() => {
        socket.on("send-data", (data) => {
         
          setUsers(data)
    
          
         
        });
    
      }, [socket]);
2
  • Ahi lo agregue. el 17 mar. 2022 a las 18:34
  • Ahi agregue en el front cuando trae la data del back. despues en el return no tengo nada aun por que no supe hacerlo el 17 mar. 2022 a las 18:37

1 respuesta 1

1

Usando hook de efecto podrías hacerlo así:

import React, {useState, useEffect} from 'react';
import socketIOClient from "socket.io-client";

export default function MiComponente(props) {
  const [users, setUsers] = useState(null);

  useEffect(() => {
    const socket = socketIOClient('https://...');
    socket.on("send-data", (data) => {
      setUsers(data)
    });
  }, []);

  // Si no es un arreglo
  if (!Array.isArray(users)) {
    return 'Cargando...';
  }

  // Si no hay usuarios
  if (users.length === 0) {
    return 'No hay usuarios';
  }
  
  // Si hay usuarios
  return users.map(data => {
    return <Person name={data.username} vote={data.vote}>
  });
}
1
  • Muchas gracias! funciono a la perfeccion el 17 mar. 2022 a las 19:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.