How to pass a hook state from one component to another in a axios function?-CodePudding

I'm trying to pass a hook state to another component inside the Axios function. The state has the initial value to false, but when the method post happens to Axios, inside then() I made the state to true which in this case is setShowFlagCreate(true) Im trying to pass this state to the UserList.js component, but I don't know-how. After I pass it, I wanna use this state to show the flag(which says a user has been created.) on the UserList.js page

How can I do this?

UserCreate.js

export default function UserCreate({}) {

const [showFlagCreate, setShowFlagCreate] = useState(false)

const save = async () => {
    const { name } = formState;

    const UserParams = {
      userName:
        currentUser.signInUserSession
      Gender: gender,
      country: USA,
    };
 
    await axios
      .post(
        process.env.REACT_APP_API_STREAMING_URL   "user",
       userParams
      ) //posting the data into db 
      .then((response) => {
        navigate("/userlist");
        setShowFlag(true); //I want this state to pass it on the UserList component as true
      })
      .catch((error) => {
        // error
        console.log(error);
      });
  

    };
}
return(
  <div>
  </div>
)

UserList.js

export default function UserList() {

  const [showFlagCreate, setShowFlagCreate] = useState(false)

useEffect(() => {
    axios
      .get(process.env.REACT_APP_API_BACKEND_URL   "users"   usersParams) //geting the user form db
      .then((response) => {
        response.data.forEach(function (item) {
          let newUser = {
            id: user.id,
            name: Username,
            gender: "male",
            description: "stuff",
            status: "Ready",
          };
        });
      })
      .catch((error) => {
        // error
        console.log(error);
      });
  }, []);

  return (
    <div>
        <FlagCreate show={showFlagCreate} setShow={setShowFlagCreate}/> //passing the props
     </div>
);
}

I want to get the state in UserList component and show the flag since the state is true.

FlagCreat.js

export default function FlagCreate({ show, setShow }) {
 <div className="max-w-sm w-full bg-white shadow-colorLg rounded-lg pointer-events-auto overflow-hidden">
              <div className="p-4">
                    <CheckCircleIcon className="h-6 w-6 text-success" aria-hidden="true" />
                  </div>
                  <div className="ml-3 w-0 flex-1 pt-0.5">
                    <p className="text-sm font-medium text-primary">The userthat you have been created is saved.</p>

                  </div>
                  <div className="ml-4 flex-shrink-0 flex">
                    <button
                      className="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                      onClick={() => {
                        setShow(false)
                      }}
                    >
                      <span className="sr-only text-secondary">Close</span>
                      <XIcon className="h-5 w-5 text-secondary hover:text-txtlinkPrimary" aria-hidden="true" />
                    </button>
                    
                  </div>
}

The idea is that after the setShowFlagCreate turned to true in UserCreate.js , the flag has to be shown in the UserCreate component . How can I make it work?

CodePudding user response：

What you should do is pass the state when calling navigation retrieve that state in the UserList.

UserCreate

navigate("/userlist", { state: { showFlag: true } });

UserList

const { state } = useLocation();
const { showFlag } = state; // use showFlag the way you want.

You can understand more how it works with this answer

CodePudding user response：

you could define this state in contextApi and share it everywhere you need - you can read about it here

CodePudding user response：

could you please provide more insight how are you rendering the userCreate.js and userList.js are they Sibling to each other, or they have parent Child or on creating user you are navigating to another route, then as explained above you can use pass state while redirecting and can add queryParam.