How to pass a value from parent to child in ReactJS/nextjs to

Question

I am new to reactjs/nextjs and need some help on how to pass a value from one page to another

I want to pass a value in my "Apply.jsx" page to confirmation.jsx page. The value is "name=joe"

Apply.jsx

Router.push({
            pathname: "/jobseeker/confirmation" })

confirmation.jsx. (need to get value in this function)

  const Confirmation = props => {
      const { children, classes, view, ...rest } = props;
    
      return (
        <div className="cd-section" {...rest}>
          <CardWithoutImg bold view="Seeker" link="confirm" orientation="left" />
        </div>
      );
    };

export default withStyles(blogsStyle)(Confirmation);

Ezzat · Accepted Answer · 2020-07-05 18:54:41Z

1

You can pass it as query

const handler = () => {
  Router.push({
    pathname: '/jobseeker/confirmation',
    query: { name: 'joe' },
  })
}

And in Confirmation you can retrieve it using useRouter hook

const Confirmation = props => {
  const router = useRouter();
  console.log(router.query) // { name : 'joe' }
  const { children, classes, view, ...rest } = props;
  ....
};

edited Jul 5, 2020 at 18:54

answered Jul 5, 2020 at 18:48

Ezzat

9016 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass a value from parent to child in ReactJS/nextjs to

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related