score:1
Accepted answer
if you don't want to use arrow for some reason. you can use currying way instead:
function toggleswitch() {
const [values, setvalues] = react.usestate({
astma: "off",
});
const toggle = (namein, valuein) => e => {
console.log("toggle", namein, valuein)
const {name, value} = (namein, valuein);
if (value === "off") {
setvalues({
...values,
[name]: "on",
});
} else if (value === "on") {
setvalues({
...values,
[name]: "off",
});
}
}
//return just the function and make the html in the page and on klick use the toggle function
//remember to export values as well.
return (
<div
classname={`switch ${values.astma}`}
onclick={toggle("astma", values.astma)}
id={"astma"}
name={"astma"}
>currying is cool. click me!</div>
);
}
reactdom.render(<toggleswitch />, document.getelementbyid("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
Source: stackoverflow.com
Related Query
- React state hooks, passing in method and parameters onClick
- React Leaflet: Is there a way to make an onClick method that adds a marker and also updates the state with that markers' location? (Beginner React)
- Passing a value using onClick and updating two state values with hooks
- React Hooks and POST method
- Passing react text field input values as parameters to a method
- UI not re-rendering on state update using React Hooks and form submission
- React hooks useState/setState not working after sorting the array and passing it
- React Native: Passing props between components and componentWillMount() method
- React Router <Link> and <Route> not passing state to Component
- Is there such a thing as a "correct" way of defining state with React hooks and Typescript?
- How do I pass a React Context's state through an onClick function created in a method inside that context class?
- React Context Api and State hooks mutation
- Using react HOC with a form. Passing common JSX and state down using a HOC
- Action and state shown on console but undefined on aplication with hooks react
- How do I correctly add data from multiple endpoints called inside useEffect to the state object using React Hooks and Context API?
- React passing down hooks causes rerender and loss of focus on input
- What is the difference between passing a function name in onclick react and calling it through callback
- Why is my state replacing my posts when I add a new one using React hooks and React context
- React Hooks - having trouble with splice updating state during onClick event
- Test react hooks state using Jest and React Hooks Library
- React Hooks TypeScript event and state types
- React hooks problem with passing value || defaultValue and updating counter
- How can I make react render the new state modifications after I have updated the state with hooks and context
- React Passing state to sibling component and up to parent class
- Update parent state based on props and onClick from child in React
- React updating display of a page's H1 state with useState and useEffect hooks
- Is there a way of passing state information from react hooks into nested functions in react?
- React Hooks Form Handling: Update the state of an object with multiple string items and one array item
- React onClick method works with 1 click behind for excuting an if statment and setState
- Passing state from child to parent using hooks - React
More Query from same tag
- Boost strap Grid system
- How to add loader over canvas element using JavaScript?
- Pass an argument to anonymous function
- How to map/filter data correctly with luxon (DateTimeNow) and ReactJs
- Is it possible to set a variable based on the current route?
- onClick attached to hyperlink does not run
- Update an object property in useState Hook,Property name should be get from a variable
- React - deleting array elements stored in state deletes wrong element
- Getting Property 'height' does not exist on type 'string' TypeScript Error
- How can I change the index column using Material-table
- Ant design Select component OptGroup in options prop
- Props data how to manipulate
- How to implement Twak.to widget in a Next JS website?
- React: update state with form data onChange using the spread operator
- Send authorization request from React to Spring REST
- How can I create token using stripejs and reactjs?
- NextJs 3rd Party Scripts dosen't work when using next/link
- Axios not using proxy setting with https
- Can i have a function inside a state in react?
- Run function foreach item when button isClicked in React Typescript
- await not waiting for async function to return value
- What is the purpose of this array after the returned object?
- Simple routing on the page. How do I set up the correct display?
- Restore scroll position after toggled a modal in react with useContext
- onPreview not working when click to previewIcon - Antd
- Conditionally render content from API response in Reactjs component
- Trying to use cleanup function in useEffect hook to cleanup img.onload
- Rendering react in a conditional for loop
- template getter must return HTMLTemplateElement in polmer <google-map> component
- TypeError: Cannot read property 'cases' of undefined