CODEWITHSUNDEEP
javascriptreactjshyperlinkreact-router
Richard
Richard

Reputation: 1117

Catching the Link click when in the same component React

I have a NavBar that has a Logo on it, that contains a Link to the Home page "/". The application starts from the main page and then its UI will start changing based on user's choices. I want to give the user a chance to reset everything if he is still in the Home component and clicks the Logo.

App.js

...
import Home from './views/Home';
import Navbar from './components/navbar/Navbar';
...

render() {
  return (
    <div>
        <Navbar />
        <main ref={(element) => { this.mainElement = element; }}>
            <Switch>
                <PrivateRoute exact path="/" component={Home} />
         ...
    </div>
  )
}

Inside NavBar I have a logo that has a Link attached to it:

NavBar.js

  <div className="col-sm-3 col-xs-6">
    <Link to="/" className="navbar-item">
      <img className="navbar-logo" src={logo} alt="" />
    </Link>
  </div>

Home.js

class Home extends React.Component {
    //Link was clicked
}

If I am already in the component Home. How can I know that the Logo's Link was clicked and refresh the state of the page to default?

Upvotes: 0

Views: 689

Answers (1)

Stoic Lion
Stoic Lion

Reputation: 480

There is a simple way to communicate this information. Here what I suggest to do:

1.The App component has the state of the application, storing all information needed to both its child Components. Add inside the state a value clicked, that is true if the image was clicked; false otherwise.

  1. Add an event handler inside App component. Pass it to the navbar, so you can use for the image tag.

  2. Pass the state to home via props; when it changes, re-render starts and home knows.

App

class App extends Component {
  state = {
     clicked: false,
  }

 handler = () => { this.setState({clicked: true})}

 componentDidMount() {
  this.timerID = setInterval(
    () => this.setState({clicked: false}),
    2000
  );
 }

  componentWillUnmount() {
    clearInterval(this.timerID);
  } 

 render() {
   return (
     <div>
      <Navbar clicked={this.handler} />
      <Home click={this.state.clicked} />
    </div>
   );
  } 
}

export default App;

Navbar

class Navbar extends Component {
    render() {
      return(
         <button onClick={this.props.clicked} >Click Me!</button>
      );
     }
}

export default Navbar;

Home

class Home extends Component {
    render() {
        console.log('rendering...')
      return(
         <p>The logo was clicked: {this.props.click ? "yes" : "no"} </p>
      );
 }
}

export default Home;

When the click on Button, the state change from false to true and from true to true. After the first click, react actually re-render the home elements, but it looks the same. To show that something happens I use two lifecycle method to reset the value from true to false. Without timer, if there's a log on home, developers can look that rendering happens at each button (or image clicks).

This links can help you now and when you'll have a bit more experience: https://www.pluralsight.com/guides/react-communicating-between-components

Upvotes: 1

Related Questions