CODEWITHSUNDEEP
javascriptreactjs
r_cahill
r_cahill

Reputation: 607

Render react component onClick

I'm super new to react but excited about its potential. Still getting to grips with the fundamentals of it all so any explanation would be greatly appreciated.

I'm looking to render an 'About' component as the user clicks a button in the 'Nav' component (with the aim to toggle this later down the line).

I've attempted to do it in the simplest way I can think of, but this is obviously very wrong:

class Nav extends React.Component {

 renderAbout() {
  return (
   <About />
 );
 }

render() {
 return (
  <div className="Nav">
    <div className="Button-Container">
    <div className="Nav-Text About-Button">
      <h2 onClick={() => this.renderAbout()}>About</h2>
    </div>
    </div>
  </div>
  );
 }
}

Would this have something to do with updating the 'state' of the About component?

Thanks in advance.

Upvotes: 6

Views: 14310

Answers (3)

kind user
kind user

Reputation: 41893

You can use state to define if imported component About has to be rendered or not.

class Nav extends React.Component {

  state = {
    isAboutVisible: false,
  }

  render() {
   return (
    <div className="Nav">
      <div className="Button-Container">
      <div className="Nav-Text About-Button">
        <h2 onClick={() => this.setState({ isAboutVisible: true }) }>About</h2>
      </div>
      </div>
      { this.state.isAboutVisible ? <About /> : null }
    </div>
    );
   }
}

Upvotes: 3

mkatanski
mkatanski

Reputation: 508

Yes, you have to change state of the component. Changing the state will automatically rerender your component. In your example it should be something like:

class Nav extends React.Component {

 state = {
   showAbout: false; // initial state
 }

 renderAbout = () => {
  if (!this.state.showAbout) return '';

return (
   <About />
 );
 }

// ES6 priavte method syntax
handleButtonClick = () => {
 this.setState({showAbout: true});
}

render() {
 return (
  <div className="Nav">
    <div className="Button-Container">
    <div className="Nav-Text About-Button">
      <h2 onClick={this.handleBtnClick}>About</h2>
      {this.renderAbout()}
    </div>
    </div>
  </div>
  );
 }
}

You could also consider using for example this package: https://www.npmjs.com/package/react-conditions

Also, remember that there is a rule that each method which listen for an event should start with the "handle" word. Like in may example.

Upvotes: 0

Medardas
Medardas

Reputation: 540

You currently do not have "About" component in actual view, you just render it somewhere out there, in the void!

To properly render a component you have to specify its place in JSX expression. Also, as one of the easiest solutions) you probably want to toggle it. So that translates to something like this:

 constructor(props){
     super(props)
     this.state={toggle:false}
 }

renderAbout(toggle) {
 if(toggle)
   return <About />
 else return null;
}

render() {
return (
  <div className="Nav">
    <div className="Button-Container">
      <div className="Nav-Text About-Button">
        <h2 onClick={() => this.setState({toggle: !toggle})}>About</h2>
      </div>
    </div>
    {this.renderAbout(this.state.toggle)}
  </div>
  );
 }
}

Upvotes: 1

Related Questions