Change the body elements overflow in a component - ReactJs

Question

A component called "BasicSearch" is used on all pages.
The search component should be displayed on full screen with a vertical scroll to see the contents with a close button on the right top corner.
The search components have some default links to navigate to different pages.

React.useEffect(() => { document.body.style.position = "fixed"; }, []);
return (
    <div className="container">
        <Button onClick={() => { document.body.style.position = "relative"; }}> close </Button>
        <a href="./xyz">Link1 </a>
        <a href="./xyz-abc">Link2 </a>
    </div>
);

The body element is set to position: relative when the close button is clicked. but, when the user navigates via any of the Link buttons then the body element is unchanged.

Could someone help me understand where I'm going wrong and how to fix this issue?

Asad Haroon · Accepted Answer · 2022-02-24 09:17:47Z

1

Make position state and add dependency to useEffect so that when its changes useEffect will change the body position to new position. And use Link tag of react-router-dom. Actually page reloads when you click on link using anchor tag so your position automatically set to its initial state:

const Search= ()=>{
 
  const [position, setPosition] = useState("fixed"); // initially its fixed
  React.useEffect(() => { document.body.style.position = position }, [position]);

  return (
    <div className="container">
    <Button onClick={() => setPosition("relative")}> close </Button>
    <Link to="/xyz">Link1 </Link>
    <Link to="/xyz-abc">Link2 </Link>
    </div>
  );
}

answered Feb 24, 2022 at 9:17

Asad Haroon

4923 silver badges9 bronze badges

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

8 Comments

Kirubanandan Kanagaraj Over a year ago

Do you have any preference if I use a component instead of <link>, then I should pass the state as props and handle this inside the linking component?

Asad Haroon Over a year ago

Its a good practice and recommendable to use Link Component (react-router-dom) in single SPA to access different pages.

Kirubanandan Kanagaraj Over a year ago

Ok, When clicking the link, for example, it won't change the body element again to a relative - it will only navigate to another page (Without refreshing the page). So how to handle the position when clicking the link?

Asad Haroon Over a year ago

On Link Switch you want to change position to relative ? on all pages or some pages?

Asad Haroon Over a year ago

Ok then pass onClick to Link component like: <Link to="/xyz" onClick={() => setPosition("relative")}>Link1 </Link>

|

Youssouf Oumar · Accepted Answer · 2023-09-27 05:51:34Z

0

Use a state for handling the position, to make sure that React will update the DOM, in combination with your useEffect:

const Search= ()=>{
  const [position, setPosition] = useState("fixed");
  useEffect(() => { document.body.style.position = position }, [position]);
  return (
    <div className="container">
        <Button onClick={() => setPosition("relative")}> close </Button>
        <a href="./xyz">Link1 </a>
        <a href="./xyz-abc">Link2 </a>
    </div>
  );
}

edited Sep 27, 2023 at 5:51

answered Feb 24, 2022 at 9:15

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

Collectives™ on Stack Overflow

Change the body elements overflow in a component - ReactJs

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related