score:1

Accepted answer

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

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.


Related Query

More Query from same tag