I'm new to react world and I have line like this:
<Button onClick={() => console.log("hello")}>Button</Button>
and on click you will get hello printed on the console. Now change the line to:
<Button onClick={() => <NewComponent />}>Button</Button>
now on click on the button, I expect the NewComponent to be rendered. But it doesn't.
I'm not sure, why that is the case. Note that I have the above code in the render method.
5 Answers
You probably want to have a stateful component that shows the other component next to the button after it was clicked. All you need to do is track whether the button was clicked:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
showComponent: false,
};
this._onButtonClick = this._onButtonClick.bind(this);
}
_onButtonClick() {
this.setState({
showComponent: true,
});
}
render() {
return (
<div>
<Button onClick={this._onButtonClick}>Button</Button>
{this.state.showComponent ?
<NewComponent /> :
null
}
</div>
);
}
}
Here's a CodePen to show it in action.
HTML
<div id="root">loading...</div>
JSX
class NewComponent extends React.Component {
render() {
return (
<div {...this.props}>
new component
</div>
);
}
}
class Button extends React.Component {
render() {
return (
<button {...this.props}>
click
</button>
);
}
}
class App extends React.Component {
constructor() {
super();
this.state = {
clicked: false
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({
clicked: true
});
}
render() {
return (
<div>
<Button onClick={this.handleClick} />
{this.state.clicked ? <NewComponent /> : null}
</div>
);
}
};
React.render(
<App />,
document.getElementById("root")
);
Use instead:
{this.state.clicked && <NewComponent />}
you can use withRouter() of react-router-dom. When we use <Route path='/path' component={newComponent} /> react-router-dom passes three props "history,location and match" , you can use push() function of history props in your onClick just by passing your whole component in withRouter() as:
JSX
import { withRouter } from 'react-router-dom' ;
import Button from 'buttonFolder/button.component';
const yourComponent = ({history}) => {
return (
<Button onClick{() => history.push.('/path')}> New componentPage </Button>
)};
export default withRouter(yourComponent);
You need to set state to track visibility of the component. Default it to false, and onclick set state to true. In your render do something like {this.state.visible ? : null}
