How can I call a component with a react button? [duplicate] - reactjs

Question

This question already has answers here:
onClick doesn't render new react component.
(5 answers)
Closed 3 years ago.
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;

Answer 1

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.

Answer 2

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.