Render react component onClick

Question

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.

kind user · Accepted Answer · 2017-06-29 10:34:36Z

3

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>
    );
   }
}

edited Jun 29, 2017 at 10:34

answered Jun 29, 2017 at 10:20

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mkatanski Over a year ago

Please, don't use 'bool' or any reserved keywords as a name of object parameter. Its confusing

kind user Over a year ago

@mkatanski True, fixed.

Medardas · Accepted Answer · 2017-06-29 10:24:40Z

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>
  );
 }
}

This is interesting, but throwing up an error for me - 'toggle' is not defined
this is ES6 syntax and everything in the example should be in component class, hence: class Nav extends React.Component { ... }

mkatanski · Accepted Answer · 2017-06-29 10:31:57Z

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.

Collectives™ on Stack Overflow

Render react component onClick

3 Answers 3

2 Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Related