Estoy tratando de hacer uso de componentes funcionales pero tengo problemas para levantar el estado. Esto implica una lista de componentes MessageWithContext secundarios dentro de un componente principal Chat. No sé cuántos MessageWithContext puede haber y se representan dentro de un bucle. Según tengo entendido, no puedo poner componentes funcionales con ganchos dentro de un bucle, ya que viola las reglas de los ganchos.

La función particular en la que estoy trabajando permite al usuario hacer clic en un mensaje para mostrar el contexto del mensaje, como la hora y el remitente, cambiando el componente en sí.

Aquí hay algo de código:

Chat.tsx:

 // Get all chat related values and methods from useChat hook const { currentMessages, conversations, activeConversation, setActiveConversation, sendMessage, getUser, currentMessage, setCurrentMessage, sendTyping, setCurrentUser } = useChat(); const [detailedMessages, setDetailedMessages] = useState([false]); {activeConversation && currentMessages.map( (g:MessageGroup) => <MessageGroup key={g.id} direction={g.direction}> <MessageGroup.Messages> {g.messages.map((m:ChatMessage<MessageContentType>) => //here I'd like to set the show detail prop based on a reference to the message <MessageWithContext key={m.id} m={m} showDetail={detailedMessages} setShowDetail={setDetailedMessages}/> )}

MensajeConContexto:

 interface IMessageWithContext { m : ChatMessage<MessageContentType> showDetail : boolean[] setShowDetail : SetStateAction<any> } export const MessageWithContext = (props: IMessageWithContext) => { //here I want to change the state of Chat.tsx with some kind of reference to the Message and its state const updateShow = (show : boolean) => { props.setShowDetail(show) } return ( <> {!props.showDetail && <div onClick={() => updateShow(true)}> <Message key={props.m.id} model={{ type: "html", payload: props.m.content }}/></div> } {props.showDetail && <div > <Message key={props.m.id} model={{ type: "html", payload: props.m.content }}> <Message.Header sender={props.m.senderId} sentTime={"just now"}> </Message.Header> </Message> </div>} </> );

¿Cómo puedo hacer que la función updateShow dentro de MessageWithContext actualice los mensajes detallados y los mensajes detallados con una serie de valores booleanos que de alguna manera están vinculados a esos componentes particulares de MessageWithContext?