score:0
you should check the element style value to decide the color to apply:
if(e.style.color === "black") '#cccccc' : 'black'
score:2
change your handlechangetextcolor to following:
const handlechnagetextcolor = (e) => {
settextcolor(textcolor === 'black' ? '#cccccc' : 'black');
}
score:2
you should assign the value of checkbox with some state variable and make the color of the text dependant on the checkbox value. following will surely help you achieve the desired results.
const [textcolor, settextcolor] = usestate('black');
const [isblack, setisblack] = usestate(true);
const handlechnagetextcolor = (e) => {
setisblack(!isblack);
settextcolor(isblack ? '#cccccc' : 'black ');
}
return(
<>
<label classname="switch">
<input type="checkbox" value={isblack} onchange={handlechnagetextcolor} />
<span classname="slider round" />
</label>
<small style={{ color:textcolor}} classname="switch-container_text">advanced view</small>
</>
)
}
Source: stackoverflow.com
Related Query
- Changing text color on click with react hooks
- implementing infinite loop of changing text with React Hooks
- Changing object property in an array with React Hooks does not evoke a re-render
- ReactJS How do I use state hooks for a list of text changing buttons with a timeout?
- Changing language with React Hooks and Contex API
- Changing color every second using React Hooks
- how to change background color when I click the button using react hooks
- Toggle icon color upon button click using React Hooks
- Changing pages with React hooks (Resets itself)
- React Hooks Change Text of Button on Click and then back again
- Changing React Leaflet Circle color with Leaflet Timedimension Plugin
- Calculate lines of text in javascript in React with Hooks and redux
- Changing background color with fade animation on scroll in React
- Click handler on mapboxGL not respondig to updated state using react hooks with typescript
- Update a react component only on button click with hooks
- Problem with use of map function in react for setting text and color of buttons
- I would like to change only clicked header link text color with react
- How can I change the color of the text separately with react hooks?
- React hooks with Gatsby. onClick changes setState on second Click only
- toogle component on click with react hooks
- changing object values with onchange handler with react hooks
- Changing button color dinamically with React
- Changing div colour styling with button click in React
- MaterialUI Text Field input getting 'undefined' values with React Hooks
- Adding animated effect of fading out with react after a click event to change background color
- How to test the child component render text after the button on the parent component click with react testing library?
- Problem with changing Array State using React Hooks
- How to setCurrent state of componet on button click with react hooks
- Have 2 issues with React, Changing the color of single button with click and play different sounds on each click
- Bootstrap .well - changing color with react props
More Query from same tag
- How to test window.location.assign using react wrapper?
- What are the advantages for using useRef or createRef rather than inline ref?
- Is there a way to spy/mock using Jest on fat arrow class instance methods for React components?
- Axios success/error calls with redux-promise
- How to use npm packages in rails?
- removeEventListener doesn't work on Modal close
- React MUI Class name collisions when using a library
- React array inside state doesn't change
- React best practice storing images on server
- Importing an MDX file into a React component to use as text for a tooltip
- Can't figure out why onClick is not updating state
- Trying to add style on react toastify
- Display items of array in subrow (react-table)
- how to validate session on react client after successful authentication from express session
- How to display table sort up/down arrows properly?
- Two-way data binding (Angular) vs one-way data flow (React/Flux)
- Positioning Materialize CSS switches in a tabular fashion
- How to pass a function as props to a component of Material-UI for React?
- Unable to get form values in React-Bootstrap's Formgroup Component
- Differences between require() and passing an object via prop or context
- React Props not passing down to children components?
- React router v6 useNavigate does not work with redux dispatch
- Vertical-align doesn't work for React Icons in React.js
- "Uncaught TypeError: fs.writeFile is not a function" when using Electron with React
- How to add right click menu to react table row, and access its properties?
- Handling signin flow in React
- Can't display data after fetch
- React Js : Value / State not getting updated
- where should I dispatch my redux
- NextJS url not working after getting exported