score:0
i created a sample code with the minimum change i can do to your code. but i must remind you that this is not (not even near) the best way to handle it.
import overview from "./overview";
import performance from "./performance";
import stability from "./stability";
export default class menu extends react.component {
constructor(props){
super(props);
this.state = {
selectedview: "overview"
}
}
changeview = (view) => {
this.setstate({selectedview: view});
}
render() {
return (
<grid>
<griditem columnspan = {3}>
<h3>menu selection</h3> <br/>
<h1 onclick={() => this.changeview("overview")}> overview </h1> <br/>
<h1 onclick={() => this.changeview("performance")}> performance </h1> <br/>
<h1 onclick={() => this.changeview("stability")}> stability </h1>
</griditem>
<griditem columnspan = {9}>
<h3>info</h3> <br/>
{this.state.selectedview === 'overview' && <overview />}
{this.state.selectedview === 'performance' && <performance />}
{this.state.selectedview === 'stability' && <stability />}
</griditem>
</grid>
);
}
}
Source: stackoverflow.com
Related Query
- How to handle events with onClick in ReactJS
- How to make carousel auto change instead of click onclick with loop on ReactJs
- How to handle onclick for disappearing elements with react-spring?
- How to clear input after onClick with ReactJS
- How to handle onClick events for array objects in ReactJS?
- How to FadeOut / FadeIn content with ReactJS at onClick event?
- Handling icon onClick events with Material-UI and ReactJS
- How to handle click events on divs with React and Typescript
- How to render different content with onclick event using ReactJS
- How to use onClick event with <Link> in reactjs
- How to get map properties and handle events in leaflet v3 with react + redux?
- In ReactJs when use onclick fuction with setState, how to pass parameters?
- How to get DOM element id with OnClick inside map fuction in ReactJs
- How to get input data in a row with onClick in that row - reactjs
- how to handle onClick event with multiple component with the same class name in React?
- How to handle the the onClick events on CheckBox in react js
- If backendserver is down then How to handle in Reactjs with Axios
- How to play HTML5 video with onClick in reactJS for multiple videos?
- How to use JQuery with ReactJS
- How to catch and handle error response 422 with Redux/Axios?
- How to use onClick with divs in React.js
- ReactJS: How to handle Image / File upload with Formik?
- href with onClick in ReactJS
- How to avoid 'children with same key' when replacing state in ReactJs component
- How to build a responsive website with ReactJs
- How to handle deploys with Webpack code splitting?
- How do people handle scroll restoration with react-router v4?
- How to make Puppeteer work with a ReactJS application on the client-side
- How to use data toggle collapse in Reactjs with Bootstrap?
- How to update ReactJS component based on URL / path with React-Router
More Query from same tag
- Kuzzle getUser by JWT Token generated early
- React + Next js: Cross json values in component
- Reactjs backend connection issue
- Stop canvas clearing on lineWidth change
- Error: Uncaught [TypeError: Cannot read property 'x' of undefined Jest react testing
- What exactly is match.url in React Router?
- Redux Form - You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop
- Is there a way to pass a generic type to the reducer used in react useReducer hook?
- using css modules, how can I import classes from a file
- onClick not invoked when clicking on sidebar
- The TextField on Paper closes unexpectedly in Material UI
- Redirect doesn't work after onClick in React
- jest check if the correct component is rendered
- Argument of type 'Element[]' is not assignable to parameter of type 'Element'
- useReducer - how to tell when state has been updated
- Canvas element does not resize when using ReactJS and PaperJS together
- How can I override components from another module?
- React: Accessing this.state inside function throws error
- how to fetch local api in react.js
- Building a custom component with MenuItem of Material UI
- Any way to make "const {user, userId} = this.state" work if user references username and userId references id
- React - input type file Semantic UI React
- Is it possible to access child context from parent context?
- Specify URL path as a variable for a REACT SSR applications built manually (i.e. NOT using NextJS )
- AppSync/Amplify Query using a Parameter Error ""Validation error of type FieldUndefined:"
- Code snippet to create self-closing tag in VSCode
- Page update when clicking a button (reactjs)
- Hide div when clicked outside the child div in ReactJs
- Can't display what is held in State property, but can display what I add to it - ReactJS
- How to show first & last data point on amchart4 Line(XY) chart