onClick doesn't render new react component.

Question

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.

Answer 1

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

Answer 2

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