Myujth

I have two different links. One is main Page, other is gallery. I have on main page 3 links with method scrollIntoView onClick that are taking me to different sections. I want to implement method redirecting me from gallery component to main page and when it's done call method scrollIntoView.

goToContact method:

goToContact = e => 
 if (window.location.pathname === "/fotobudka/") 
 this.fbContactElement.scrollIntoView(
 behavior: "smooth",
 block: "start"
 );
 
 if (window.location.pathname !== "/fotobudka") 
 this.changeUrl();
 this.goto();
 
 ;

Change Url redirect me to main page:

changeUrl() 
 return <Redirect to="/fotobudka/" />;
 

When it's done:

goto = () => 
 setTimeout(() => 
 let fbContactElement = document.getElementById("contact-form");
 fbContactElement.scrollIntoView(
 behavior: "smooth",
 block: "start"
 );
 , 100);
 ;

My method works perfectly, but I know SetTimeout isn't good solution. I've tried async/await but I think I am not good enough to implement that.

How to refactor this without using SetTimeout function ?

You have to use setState to set a property that will render the inside your render() method.

class MyComponent extends React.Component 
 state = 
 redirect: false
 

 goTo = () => ...

 goToContact = e => 
 this.setState( redirect: true ,
 ()=>goto());
 

 render () 
 const redirect = this.state;

 if (redirect) 
 return <Redirect to='/fotobudka'/>;
 

 return (...)
 

You can also see an example in the official documentation: https://reacttraining.com/react-router/web/example/auth-workflow

You can use the componentDidMount() lifecycle hook for executing some code when a component is loaded. But you have to avoid an infinite update cycle by passing some query param something like doScroll=true. Now you can simply check inside your componentDidMount() hook for your query param and execute your scroll function

I solved my issue, in one forum I've checked that via interval we can check if item already exist on page. In React it looks like this:

goto = selector => 
if (window.location.pathname !== "/fotobudka/") 
 this.constructor.changeUrl();

let checkExist = setInterval(() => 
 let element = document.getElementById(selector);
 if (element) 
 element.scrollIntoView(
 behavior: "smooth",
 block: "start"
 );
 clearInterval(checkExist);
 
, 100);
;

static changeUrl() 
 return <Redirect to="/fotobudka/" />;