score:1
Accepted answer
you can use :hover effect to change background image.
score:1
trying explicitly passing the state you want instead of toggling it.
toggleicon = ismouseover => this.setstate({ ismouseover });
...
onmouseenter={() => this.toggleicon(true)}
onmouseexit={() => this.toggleicon(false)}
score:1
const normalicon = () => (<div> normal </div>)
const infoicon = () => (<div> info </div>)
class thing extends react.component {
state = { ismouseover: false };
toggleicon = () => this.setstate(prevstate => ({ ismouseover: !prevstate.ismouseover }));
render = () => {
const { ismouseover } = this.state;
return (
<div
onmouseenter={this.toggleicon}
onmouseleave={this.toggleicon}
>
{ismouseover ? <infoicon /> : <normalicon />}
</div>
)
}
}
reactdom.render(<thing />, document.getelementbyid("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />
looks to be working as expected. i changed your setstate
in toggleicon
to use a function instead of an object, but other than that, it seems fine...
Source: stackoverflow.com
Related Query
- How to manage State values when cursor is moving fast over a component in React JS?
- How to re-render react component when mapping over state that is array of objects
- How to store input values when moving to another component in react typescript functional components
- How do I use react hooks to tidy up a functional component when it unmounts (using values from state in the tidy up)
- React event onMouseLeave not triggered when moving cursor fast
- How to access state when component unmount with React Hooks?
- How to maintain react component state when goback from router?
- how and when to call a react component methods after state change from redux
- How to stop re render child component when any state changed in react js?
- How to properly update a react native swiper component when state changes?
- How do I manage state on a React component that can have state changed from the parent or from events upon it?
- React - How do i force child components to re render when parent state component changes?
- React - How change state of single component when there are multiple instance of same component?
- How to use multiple or two state values in one component or class file in react JS?
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- How to re-render only one component on hover when state changes in React
- How to optimize in react js while working with useReducer, looped over state which is passed to child component
- How to trigger a function when cursor stops moving for 3 seconds using react hooks?
- How to re-rendering react class component when state is changed
- How to change the state of the particular component when it is clicked, using useState in react js?
- React JS how to have a component moving to next row when window is getting smaller
- How to manage state in a react button component on submit
- How to render component conditionally when leaf value of global state changes using react hooks
- How do I tell React component to change its state when an event is triggered from third party lib?
- How to prevent Re-render in react when the state is changed using Functional Component
- how to assign values to state array in a class component of react
- How to dynamically update values in Shopping Cart when one item value is changing in React JS using state in map function?
- React DevTools show very big background when moving cursor to a react component
- How to cause a component to re render in react when using a hook which holds some state
- How to map over an object which has a unique id for each object values and return the values to a React component
More Query from same tag
- How to skip the update of state inside getDerivedStatefromProps() in childComponent only for the first time of rendering the childComponent
- React Add Item with spread operator
- Adding types to async func inside createAsyncThunk
- DateTimePicker from react widgets open on focus
- React Navigation; use image in header?
- Should I use state at all for a variable that does not affect rendering?
- Struggling to get framer-motion's exit animation working. [React.JS]
- Fetch data from api(RESTful) db(mongodb) according to user input
- Getting NaN after adding the same number twice
- google button not rendering - react.js
- React Append a button on radio button selection
- what is the best way to mock window.sessionStorage in jest
- Redux action throwing "TypeError: Cannot read property 'num_of_players' of undefined" in mapStateToProps function
- i got error from console while making loginPage but i don't know what's wrong (React.js)
- Redux Form won't allow Initialize Form state values to be edited
- storybook with typescript does not referring to tsx file as typescript file - 'Parsing error: Missing semicolon'
- Redux Toolkit `useAppSelector` value causes render when it isn't updated
- Rendering components using .map resets setTimeout within components
- React Collapsible - Add an icon
- Bundled file is not found
- React native flatlist, not updating correctly when deleting element from state
- How to update state of the component with data from API
- JSON Formating on web pages
- Variable inside UseEffect on React.js
- Create react table dynamically going top to bottom
- Getting Mailgun 'ERR_HTTP_HEADERS_SENT'
- List items in object list once ReactJS
- TypeError: Cannot read property 'state' of undefined React, state passed to other component is undefined
- Selection of Linked Selections
- [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client in MERN Stack Application