CODEWITHSUNDEEP
javascriptreactjs
starkk92
starkk92

Reputation: 5924

How to href to particular component in react on some action

I am new to React.

I have written a sample react program where I have 2 components some thing like this.

sample code:

render: function(){
{/* onclick of this button should move the page to editname component*/}
  <Button ..../>
  {listnames} 
  {editname}
}

I have editname component at the very bottom of the page. So I have placed to a button at the top of the page.On clicking that button.I should move to the editname component.

How can I do this in react.Don't want to use jquery. Any react way?

Upvotes: 1

Views: 4367

Answers (1)

Brigand
Brigand

Reputation: 86250

The browser supports this natively! If you have <a href="#some-id"> and there's an element with id="some-id" it'll scroll to that element. This means you could also link someone directly to the edit name field.

Here's an example

return (
  <div>
    <a href="#x-change-name">Go to change name</a>

    <Spacer />

    <div id="x-change-name">
      <input placeholder="Name..." />
    </div>
  </div>
);

The alternative is to have an event emitter, send an event requesting the scroll to change, passing along enough information to uniquely identify a component. The component is listening for the event and tells the browser to scroll to its element. You can find the actual "how to scroll to element" with a quick google search.

Upvotes: 2

Related Questions