score: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.
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.
Source: stackoverflow.com
Related Query
- how can my call the action in my component using typescript with react redux?
- How to call a function with arguments onclick of a button in a react component
- How can I call a component with a react button?
- how can i render a component with an API call with props react js
- How can I prevent my functional component from re-rendering with React memo or React hooks?
- How can I search for a component with specific key in React Developer Tools?
- React useEffect calls API too many time, How can I limit the API call to only once when my component renders?
- How can we implement an Open with Postman button to open a postman collection link sent from a third party react application?
- Creating A React Component That Can Be Shown With A Function Call (like react-toastify
- How to call a component onClick of a button in a functional component with MaterialUI Button
- How to implement a React Component with sub-components and call them?
- How can I convert a class with a constructor to a functional component using React Hooks?
- How to call event from component after setting its state with React hooks?
- How can I export a react material-ui component with 2 styles object? (material-ui V1)
- In React, how do I call a function in one component (which is being rendered with React Router) from another component?
- How to test a handle function call with a react functional component with hooks
- How can click on button to get one of components with react
- How to make a react component that can be rendered with no data and later rendered with data?
- React - How to make a modal component that I can call from anywhere?
- How can I pass a jsx react component (with prop) into a Navbar component with a Dropdown properly?
- React Redux Problem: How to call multiple api in your react component with React Redux Toolkit RTK queries?
- How can I filter json data from api call in react into different sections of the component
- How can I added a wrapper with styled component in React Modal in Typescript?
- How to call Grpahql with .Net core from a React component using Axios?
- How can I send a request to API with on click of my button in React hooks?
- How can I avoid unnecessary re rendering of an HOC component, when the parameter component renders in ReactJS with react router
- How can i test with Enzyme+Mocha method call inside Component
- How to call a function from different component using React with Redux Form?
- How can I maintain state and "this" with react component functions
- With a React Hooks' setter, how can I set data before the component renders?
More Query from same tag
- Disable or render checkbox label background highlighting as transparent on click
- Styled Components, required props defined as defaultProps show as missing
- How to get row number of "parent" table in React-table from another react table in sub component?
- Django Forms and Authentication with Front-end Framework (AngularJS/ReactJS)
- Infinite loop when setting and using state in a `useCallback` that is being called from a `useEffect`
- Dynamically extract the same object name from a multi level nested object
- react-hook-form id not saved with useFieldArray
- I am having issues compiling my code with this error prompting after compilation
- How To Access History in React With React-Router 6
- How to filter array from a stacked array in react
- React Bootstrap Card Image not appearing
- Even after redux state update mapStateToProps not returning updated props to components in react
- React - How to remove a button in Ant Design Modal
- Props not updating when I change the store in react
- ReactJs 0.14 - TreeView
- React object and array iteration
- Material UI popper anchorEl state not changing
- How can I hide columns whose value is null in React-Table.js?
- looping over array with thead and tbody tags in react
- ReactJS - render conditionally whitespace
- Looping api calls in redux-thunk (React redux application)
- Type InferableComponentEnhancerWithProps is missing the following properties from type Component<OwnProps>
- Allow input type number only a number/float between 0-1
- SVG circle shape morphing
- React - Firebase module error when i try to import 'firebase/app'
- How to make axios url point in my VPS nginx
- count repeated array of object property to produce a new array
- Invalid hook call. How to set a value with react axios get call?
- Except Header in Modal mask
- Nested forms with global state