How can I call a component with a react button?

Question

Sorry if this topic is probably a copy of another one, but I am still with some doubts and I could not solve reading this related topics:

onClick doesn't render new react component.

How can I call my 'Survey' component from the react button, using onClick? I am using "onClick={Survey}" but it is not working, there is another way to do it or it is something wrong with this kind of call.

class App extends Component {
  render() {
    return (
        <div className="App">
                <Container>
                  <Row>
                    <Col><ClientInformation /></Col>
                  </Row>
                  <Row>
                    <Col>1 of 2 </Col>
                    <Col>2 of 2</Col>
                  </Row>
                  <Row>
                    <Col><Button variant="outline-primary" size="lg" block>QR Code
                 </Button></Col>
                    <Col><Button variant="outline-success" size="lg" block onClick={Survey} >Survey</Button></Col>
                  </Row>
                  <Row>
                    <Col>1 of 2</Col>
                    <Col>2 of 2</Col>
                  </Row>
                  <Row>
                    <Col><Button variant="outline-warning" size="lg" block>Warning</Button></Col>
                    <Col><Button variant="outline-secondary" size="lg" block>Secondary</Button></Col>
                  </Row>
                  <Row>
                    <Col>1 of 2</Col>
                    <Col>2 of 2</Col>
                  </Row>
                </Container>
            </div>
        </div>
        );
      }
    }

    export default App;

@Rudson are you trying to go to a new page or simply showing/hiding a component on the same page? — Saqib, Sep 29 '19 at 22:24

score 1 · Accepted Answer · answered Sep 29 '19 at 22:25

onClick is an event handler, it's a function that is called to do something... there does not exist any built-in functionality in React that would allow you to give a component directly to a function and expect it to know what to do with it and when.

What you'd need to do is store a piece of data in your state that you can use to conditionally render the component.

I noticed you tagged this question with react-router. If you're talking about how to provide a component for a certain route, you need to import their built-in Route, Switch and Link components and provide your own component as the component prop on the Route. They provide an example.

score 1 · Answer 2 · answered Sep 29 '19 at 22:36

I think you are misunderstanding for the onClick handler. it requires function not react component or object. Please use this.

import Survay from './survay'; // use correct path of the survay component

class App extends Component {
  state = {
   display: false,
 }
  render() {
    return (
        <div className="App">
                <Container>
                  <Row>
                    <Col><ClientInformation /></Col>
                  </Row>
                  <Row>
                    <Col>1 of 2 </Col>
                    <Col>2 of 2</Col>
                  </Row>
                  <Row>
                    <Col><Button variant="outline-primary" size="lg" block>QR Code
                 </Button></Col>
                    <Col><Button variant="outline-success" size="lg" block onClick={()=>{this.setState({display: true})} >Survey</Button></Col>
                  </Row>
                  <Row>
                    <Col>1 of 2</Col>
                    <Col>2 of 2</Col>
                  </Row>
                  <Row>
                    <Col><Button variant="outline-warning" size="lg" block>Warning</Button></Col>
                    <Col><Button variant="outline-secondary" size="lg" block>Secondary</Button></Col>
                  </Row>
                  <Row>
                    <Col>1 of 2</Col>
                    <Col>2 of 2</Col>
                  </Row>
                  {
                   display && 
                   <Survey/>
                   }
                </Container>
            </div>
        </div>
        );
      }
    }

    export default App;

And then please add the style to set a proper position and displaying for your Survay component.

How can I call a component with a react button?

2 Answers2