Render responsive component onClick
I'm super new to react, but excited about its potential. I still enjoy the basic principles of it all, so any explanation would be greatly appreciated.
I'm looking to create an About component when the user clicks a button in the Nav component (to switch this later down the line).
I tried 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 anything to do with updating the "state" of the "O" component?
Thanks in advance.
source to share
You can use state to determine if the imported component should be displayed About
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>
);
}
}
source to share
Yes, you must change the state of the component. Changing the state will automatically reload 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 can also consider using this package for example: https://www.npmjs.com/package/react-conditions
Also, remember that there is a rule that every method that listens to an event must begin with the word "handle". As in the example.
source to share
At the moment you don't have an About component, you just render it out there somewhere, in the void!
To render the component correctly, you must specify its location in the JSX expression. Also, as one of the easiest solutions), you probably want to switch it. So it translates 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>
);
}
}
source to share