React js show notification after redirecting to the new route

Question

So I have two form components and one notification component in a react project. When submitting the first form, the route is redirected to the second form's route, where the notification that the action of the first form was done successfully must appear. How do I achieve that using my current components.

My AddEmployee.js form (where the action takes place)

const AddEmployee = () => {

const { id } = useParams();
let history = useHistory();
const [notify, setNotify] = useState({ isOpen: false, message: '', type: '' })
const [firstName, setFirstName] = useState();
const [lastName, setLastName] = useState();

async function handleUpdate() {
    let item = {
        firstName: firstName,
        lastName: lastName,
    }
    //Update API Call Result

    if (result.httpStatus === 200) {
        history.push("/user/" + employeeId); // The route of the second form
        setNotify({
            isOpen: true,
            message: 'Added Successfully',
            type: 'success'
        })
    }
}

return (
    <>
        <input onChange={e => setLastName(e.target.value)} name="lastName" type="text" />
        <input onChange={e => setFirstName(e.target.value)} name="firstName" type="text" />
    </>
);
}

export default AddEmployee;

My SingleEmployee.js form (where the notification must appear)

const SingleEmployee = () => {

const { id } = useParams();
const [notify, setNotify] = useState({ isOpen: false, message: '', type: '' })
const [firstName, setFirstName] = useState();
const [lastName, setLastName] = useState();

async function getSingleUser() {
    //API to get user Info

    if (result.httpStatus === 200) {
        setFirstName(result.result[0].firstName);
        setLastName(result.result[0].lastName);
    }
}
useEffect(() => {
    getSingleUser();
}, []);

return (
    <>
        <label>{firstName}</label><br />                        
        <label>{lastName}</label>
        <Notification
            notify={notify}
            setNotify={setNotify}
        />
    </>
);
}
export default SingleEmployee;

And finally, my notification.js

export default function Notification(props) {

const { notify, setNotify } = props;

const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
        return;
    }
    setNotify({
        ...notify,
        isOpen: false
    })
}

return (
    <Snackbar
        open={notify.isOpen}
        autoHideDuration={2000}
        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
        onClose={handleClose}>
        <Alert
            severity={notify.type}
            onClose={handleClose}>
            {notify.message}
        </Alert>
    </Snackbar>
)
}

So the process is when I add a new employee, I should be redirected to the SingleEemployee page, where the notification that says created successfully should appear but only after the page is redirected. How to do that?

Read about "lifting state up" in React. This question may also help: https://stackoverflow.com/questions/38901106/how-to-make-a-shared-state-between-two-react-components — Randy Casburn, Sep 11 '21 at 13:55

deepak · Answer 1 · 2021-09-11T14:51:25.967

You need to set the notification state in SingleEmployee.js file not in the addEmployee file.

We need to pass a state parameter when we are pushing in history. In AddEmployee.js

const AddEmployee = () => {

const { id } = useParams();
let history = useHistory();
const [notify, setNotify] = useState({ isOpen: false, message: '', type: '' })
const [firstName, setFirstName] = useState();
const [lastName, setLastName] = useState();

async function handleUpdate() {
    let item = {
        firstName: firstName,
        lastName: lastName,
    }
    //Update API Call Result

    if (result.httpStatus === 200) {
        history.push("/user/" + employeeId, {fromCreate: true}); // The route of the second form
       
    }
}

return (
    <>
        <input onChange={e => setLastName(e.target.value)} name="lastName" type="text" />
        <input onChange={e => setFirstName(e.target.value)} name="firstName" type="text" />
    </>
);
}

export default AddEmployee;

const SingleEmployee = () => {

const { id } = useParams();
const location = useLocation();
const [notify, setNotify] = useState({ isOpen: false, message: '', type: '' })
const [firstName, setFirstName] = useState();
const [lastName, setLastName] = useState();

async function getSingleUser() {
    //API to get user Info

    if (result.httpStatus === 200) {
        setFirstName(result.result[0].firstName);
        setLastName(result.result[0].lastName);
        if(location.state && location.state.fromCreate){
        setNotify({
                isOpen: true,
                message: 'Added Successfully',
                type: 'success'
            })}
    }
}
useEffect(() => {
    getSingleUser();
}, []);

return (
    <>
        <label>{firstName}</label><br />                        
        <label>{lastName}</label>
        { notify.isOpen && <Notification
            notify={notify}
            setNotify={setNotify}
        /> }
    </>
);
}
export default SingleEmployee;

Yes but then the notification will always appear whenever I access the singleUser form, which is not the case in my project, I access this page also when I update user info or by clicking on more user info when listing all users. I don't want this notification to appear every time i access the single employee page — nour, Sep 11 '21 at 14:02
I guess you are sending the employee id and based on Id you are fetching record so If record is present then only it is going to show the notification. It is not going to render the notification every time. You may put a check in the singleEmployee on the state of the notification pop up. — deepak, Sep 11 '21 at 14:05
I have updated the code. I have put the condition . Notification will be only visible when state of notification is isOpen. — deepak, Sep 11 '21 at 14:11
I already now that. What i need is for the state of the notification to be open only if the route /user/id is redirected from the route /createuser. — nour, Sep 11 '21 at 14:26
You may send the state with history object and in later component you may use this state. Code has been updated. — deepak, Sep 11 '21 at 14:52

score 0 · Answer 2 · answered Sep 11 '21 at 14:01

0

In your App.js, you can detect route change, maybe u can make use of this to trigger notification

import React from 'react';
import { useLocation, Switch } from 'react-router-dom'; 

const App = () => {
  const location = useLocation();

  React.useEffect(() => {
    console.log('route changed');
  }, [location]);

  return (
    <Switch>
      {/* Routes go here */}
    </Switch>
  );
};

answered Sep 11 '21 at 14:01

Kritish Bhattarai

1,501
15
20

how can I detect that the route changed from create user to show single user? – nour Sep 11 '21 at 14:09
check `console.log('route changed')` at line 8 in above example – Kritish Bhattarai Sep 11 '21 at 14:12
it only logs 1 time when I start the app but when I change the route it logs nothing – nour Sep 11 '21 at 14:14
check this simple sandbox, it works if you do it right [sandbox_link](https://codesandbox.io/s/admiring-andras-3i8mu?file=/src/App.js) – Kritish Bhattarai Sep 11 '21 at 14:27

React js show notification after redirecting to the new route

2 Answers2