-2

Bom, estou com a seguinte dúvida: Queria passar as informações de um componente para outro quando eu clicar no componente, tipo assim:

Eu criei um contexto usando o ContextApi do React que provem as informações para todos os componentes da aplicação.


const [user, setUser] = useState([
    {
      chatId: 1,
      title: "Fulano de Tal",
      image:
        "https://cdn.pixabay.com/photo/2016/11/01/21/11/avatar-1789663_960_720.png",
      numberPhone: "559198765432",
      status: "Online",
    },
  ]);

Abaixo segue o componente chatList no qual eu quero clicar e passar as informações para o componente Header:

import React, { useContext } from "react";
import { UsersContext } from "../../provider/context";
import "./styles.css";

export default function ChatList({ onClick, active, data }) {
  const date = new Date();
  let hours = date.getHours();
  let minutes = date.getMinutes();
  hours = hours < 10 ? "0" + hours : hours;
  minutes = minutes < 10 ? "0" + minutes : minutes;
  const { user } = useContext(UsersContext);

  return (
    <div className={`chatlistItem ${active ? "active" : ""}`} onClick={onClick}>
      <img src={user[0].image} className="chatlistItem-avatar" />
      <div className="chatlistItem-lines">
        <div className="chatlistItem-line">
          <div className="chatlistItem-name">{user[0].title}</div>
          <div className="chatlistItem-date">
            {hours}:{minutes}
          </div>
        </div>
        <div className="chatlistItem-line">
          <div className="chatlistItem-lastMsg">
            <p>{user[0].status}</p>
            {/* <p></p> */}
          </div>
        </div>
      </div>
    </div>
  );
}

Aqui está o componente em que quero receber as informações vindas do chatList:

import React, { useContext } from "react";

import SearchIcon from "@mui/icons-material/Search";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import ChatIcon from "@mui/icons-material/Chat";
import { UsersContext } from "../../provider/context";

export default function Header() {
  const { user, setUser } = useContext(UsersContext);
  const { handleChatInternal } = useContext(UsersContext);

  return (
    <div className="chat-header">
      <div className="chat-header-info">
        <img src={user[0].image} className="chat-avatar" />
        <div className="containerInfo">
          <div className="chat-name">{user[0].title}</div>
          <p className="chat-status">{user[0].status}</p>
        </div>
      </div>

      <div className="chatWindow-headerbuttons" title="Pesquisar conversa">
        <div className="chat-btn">
          <SearchIcon style={{ color: "#999" }} />
        </div>

        <div className="chat-btn" title="Opções">
          <MoreVertIcon style={{ color: "#999" }} />
        </div>

        <div
          className="chat-btn"
          title="Chat interno"
          onClick={handleChatInternal}
        >
          <ChatIcon style={{ color: "#999" }} />
        </div>
      </div>
    </div>
  );
}

Caso tenham alguma dúvida, ou se algo não ficou muito claro, por favor mandem aqui pra eu saber.

1 Resposta 1

-2

Lucas, para isso que vc precisa, acredito que o melhor seria usar uma função de callback, vc cria uma prop que vai receber a função que sera executada, mas esta função está especificada no pai, na documentação do react tem um exemplo: Passando Funções para Componentes.

O context api do react foi idealizado para outra finalidade, que é passar informações de um componente avô para um componente neto, sem ter que passar pelo pai: Context

1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    1/02/2022 às 12:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .