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.

That's just not how it works. Where would you expect the component to render? — Felix Kling, Nov 21 '15 at 05:47
But where? Above the button? Below the button? Inside the button? *Inside the `onClick` attribute?* Somewhere else? Currently your click handler is something like `function() { React.createElement(...); }`. It doesn't do anything with the element that was created. — Felix Kling, Nov 21 '15 at 05:49
@FelixKling: Oh now it make sense, so we need to do something like `React.render` and give the area in which need to be renderd — batman, Nov 21 '15 at 05:50
Right. But your component should probably just have state and render the component next to the button after the button was clicked. — Felix Kling, Nov 21 '15 at 05:51
@FelixKling: Thanks now it make sense, you can provide the answer I can accept. — batman, Nov 21 '15 at 05:52
i am having the same problem. t tried the solution below,yet its not working for me. can you please have a look : http://stackoverflow.com/questions/42158143/rendering-react-components-on-click/42158375#42158375 — Ashish, Feb 12 '17 at 17:48

score 97 · Accepted Answer · answered Nov 21 '15 at 05:55

97

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

answered Nov 21 '15 at 05:55

Felix Kling

795,719
175
1,089
1,143

10

Hi.what if i want to load only NewComponent on the same page overwriting all the other components without using react router? – Vikram Saini Jun 27 '17 at 09:57
@MustafaMuawia: No. – Felix Kling Jul 05 '21 at 14:52
For some reason, it shows me this error: TypeError: Cannot read property 'onButtonClick' of undefined – Abhirajshri Winsome Aug 07 '21 at 12:29
@AbhirajshriWinsome: You are likely accessing `this.onButtonClick` in a function who's `this` value does not point to the component instance. – Felix Kling Aug 07 '21 at 13:11

score 10 · Answer 2 · answered Nov 21 '15 at 06:39

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

A pen never helped so much. I'm starting to get the conditional rendering issue about React :) thanks! — mluke, May 23 '17 at 20:03

score 6 · Answer 3 · answered May 02 '18 at 07:01

6

Use instead: {this.state.clicked && <NewComponent />}

answered May 02 '18 at 07:01

Valentin Micu

73
1
6

score 2 · Answer 4 · edited Jan 21 '21 at 13:27

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

score 0 · Answer 5 · answered Jul 08 '19 at 00:56

0

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}

answered Jul 08 '19 at 00:56

Ian

544
3
16

onClick doesn't render new react component.

5 Answers5

Linked

Related