CODEWITHSUNDEEP
javascriptreactjs
batman
batman

Reputation: 3685

onClick doesn't render new react component.

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.

Upvotes: 58

Views: 162363

Answers (5)

Varun Singh
Varun Singh

Reputation: 29

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

Upvotes: 2

Ian
Ian

Reputation: 562

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}

Upvotes: 0

Valentin Micu
Valentin Micu

Reputation: 73

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

Upvotes: 6

Brian Swisher
Brian Swisher

Reputation: 423

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

Upvotes: 10

Felix Kling
Felix Kling

Reputation: 816282

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

Upvotes: 98

Related Questions