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 UserParams = {
userName:
currentUser
Gender: gender,
country: USA,
};
await axios
.post(
process.env.REACT_APP_URL, userParams
)
.then((response) => {
navigate("/userlist");
setShowFlag(true); //I want this state to pass it on the UserList component as true
})
.catch((error) => {
console.log(error);
});
};
}
return(
<div>
</div>
)
UserList.js
export default function UserList() {
const [showFlagCreate, setShowFlagCreate] = useState(false)
useEffect(() => {
axios
.get(process.env.REACT_API_URL + usersParams) //geting the user form db
.then((response) => {
response.data.forEach(function (item) {
let newUser = {
id: user.id,
name: Username,
gender: "male",
description: "stuff",
};
});
})
.catch((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>
<div>
<p>The user that you have been created is saved.</p>
</div>
<div>
<button onClick={() => {setShow(false)}}>
<span >Close</span>
</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?
