如何从另一个组件调用 function 做出反应

Question

I am trying to call a function from a different component but when I console.log('hi') it appear but it didn't call the messageContext .

Here is my follwing code from Invitees.js :

  const [showPreview, setShowPreview] = useState(false);

  const toggleUserPreview = () => {
    setShowPreview(!showPreview);
  };
      {showPreview && (
        <ResultsWrappers togglePreview={toggleUserPreview}>
          <UserPreview
            userInfo={applicant}
            skillStr={applicant.Skills}
            togglePreview={toggleUserPreview}
          />
        </ResultsWrappers>
      )}

Here is the component have the function I want to call UserPreview.js :

import { useMessageContextProvider } from "../context/MessageContext";
const UserPreview = ({ userInfo, skillStr, togglePreview }) => {
 const messageContextProvider = useMessageContextProvider();
  const messageUser = () => {
    togglePreview();
    messageContextProvider.updateActiveUserToMessage(userInfo);
    console.log('hi');
  };
...

};

Here is my messageContext:

import { createContext, useContext, useState } from "react";
const messageContext = createContext();
export const MessageContextProvider = ({ children }) => {
  const [activeUserToMessage, setActiveUserToMessage] = useState({});
  const [isOpenMobileChat, toggleMobileChat] = useState(false);
  const updateActiveUserToMessage = (user) => {
    setActiveUserToMessage(user);
  };
  return (
    <messageContext.Provider
      value={{
        updateActiveUserToMessage,
        activeUserToMessage,
        isOpenMobileChat,
        toggleMobileChat,
      }}
    >
      {children}
    </messageContext.Provider>
  );
};
export const useMessageContextProvider = () => {
  return useContext(messageContext);
};

When the messageContext called it should open the chatbox like this:

Answer 1

The code you showing is not enough to say it for 100%, but it seems like toggleUserPreview - function called twice, so it reverted to original boolean value.

One time as <ResultsWrappers togglePreview={toggleUserPreview}/>

and second time as <UserPreview togglePreview={toggleUserPreview}/> .