how to pass value from one component to another using useNavigate hook

Dull Dingo answered on February 18, 2023 Popularity 3/10 Helpfulness 1/10

answer how to pass value from one component to another using useNavigate hook

how to pass value from one component to another using useNavigate hook

Comment

If you are in component A and want to pass value to B you can do this


function ComponentA() {
  const navigate = useNavigate();
  const propsToPass = {prop1: 'value1', prop2: 'value2'};

  const handleClick = () => {
    navigate('/componentB', { state: propsToPass });
  }
  return (
    <button onClick={handleClick}>Navigate to Component B</button>
  );
}
//Component B
function ComponentB() {
  const location = useLocation();
  const passedProps = location.state;

  return (
    <div>
      <p>Prop 1: {passedProps.prop1}</p>
      <p>Prop 2: {passedProps.prop2}</p>
    </div>
  );
}

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: hook javascript using

Link to this answer
Share Copy Link

Contributed on Feb 18 2023

Dull Dingo

0 Answers Avg Quality 2/10

how to pass value from one component to another using useNavigate hook

Contents

More Related Answers

how to pass value from one component to another using useNavigate hook

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.