Actualmente, tengo un mensajero de chat WebSocket que usa react js, quiero que guarde el objeto del mensaje cuando hago clic en su botón asociado para que lo fije. ¿Cómo obtengo una pulsación de botón para guardar el objeto con el que está asociado?
Actualmente, tengo una variedad de objetos que simplemente se apilan uno encima del otro así:
{messages.map(message => ( <> <tr> <td>{message.message}</td> <td><button id="pin_button" type="button" >Pin Message</button></td> </tr> </> ))}Lo que quiero hacer es tenerlo cuando presione ese botón, guardará ese objeto y, de preferencia, lo enviará a un WebSocket para que otras personas puedan ver el mensaje que fue anclado.
Deberías usar estado.
const [savedMsgs, setSavedMsgs] = useState([]); <ul className="saved-msgs"> {savedMsgs.map((msg,i) => <li key={i}>{msg.message}</li>)} </ul> <tr> <td>{message.message}</td> <td> <button id="pin_button" onClick={() => setSavedMsgs([...new Set([...savedMsgs, message])])} > Pin Message </button> </td> </tr>