Agfdhyk

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/" />;

}