score:1
the outer <div>
of your component has its own onclick
handler which is setting the value of your state back to false
. try using stoppropagation()
on the inner onclick
handled event. that will prevent the event from propagating to the outer parent <div>
, and only the inner onclick
handler will execute when it is clicked on.
{
!this.state.selected || !this.actions.length ? null : (
<div
style={{
position: "absolute",
bottom: "0"
}}
>
{this.actions.map((action, index) => (
<div
onclick={e => {
e.stoppropagation();
this.setstate({ selected: false });
}}
key={index}
>
<itemactionicon {...action} />
</div>
))}
</div>
);
}
Source: stackoverflow.com
Related Query
- React useCallback does not get updated on state change
- State does not get updated with React hooks
- State does not get updated immediately in react js
- React state does not get updated
- React does not re-render updated array state
- Why React component get re-rendered only once when state does not change?
- HandleMouseMove fired from mousemove event listener in React Js does not use updated state
- React test passes but component does not work properly when state updated in document.addListener handler
- Why does TS do not get React state assertion from Interface?
- Jest Mock API function causes react "act" warning and state does not gets updated
- React Hooks: Adding new fields to an Object state does not get reflected immediately
- react child props does not update when sending updated parent state
- React event target value from jsx element does not get bind to state and json array (Type error cannot read the properties of undefined )
- React component not able to get updated state value
- React + Redux, component does not get update while the state is changing
- Why does my set state does not get updated when given a value?
- react redux does not return updated state when component load
- Why react does not show updated value even if state changes?
- Redux State Does Not Get Updated In Dev Tools But Current State Is Being Reflected In Props
- How do I access React State properties using TypeScript? Get property does not exist on type error
- Why does not the background color get applied from props using state for a styled component div using react and typescript?
- Why does calling react setState method not mutate the state immediately?
- React - State not updated
- React - useState - why setTimeout function does not have latest state value?
- Why does null React component state initialization get `never` type?
- State using React Typescript: Property does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes
- React leaflet center attribute does not change when the center state changes
- React does not refresh after an update on the state (an array of objects)
- React component view does not get update
- React Dev Tools does not show Component Names or State Variable Names
More Query from same tag
- React-bootstrap-table - Expand component only after row click and not by default
- ReactJS component functions
- How can I center my header buttons and push items to the far right of my toolbar?
- How to pass interface to the generic?
- Display Directions with React Google Maps
- Using min-height and max-height at the same time
- Adding a className using variables (HTML, ReactJS)
- How to access CSS variables inside props function of styled components?
- Bar series not rendering correctly under label using the react-vis library
- Having problem with import in ES6 module: property is not exported
- add bullets (•) between html links except last item dynamically generated links in React
- Issues with react-bootstrap-autosuggest
- Countdown Values return 0
- Getting current value of variable outside the useEffect in React
- Dynamic views depending on how many views are present with free form movement
- ESLint: TopBarClass not found in './TopBar'(import/named)
- React formik select value not bind in array
- How to focus the next input with React
- .reset() method results in error in typescript to reset forms
- How to make changes by using onChange using <select> in React?
- VS Code autocomplete/intellisense not working
- React Component not Rendering New Data from Redux Store
- App.tsx didn't receive the context updated with a new state
- How to dynamically render list of components without re-rendering entire list with every new addition?
- How to use less.modifyVars in React?
- Adding a EDIT button on the same row of the DetailsLists component in Office-ui-Fabric - ReactJS
- How to convert object into div containing keys + values?
- I want to use axios with foreach in useEffect react Js but it gives me (cannot read property Symbol(Symbol.iterator) error?
- React useState keep giving me undefined
- How to change state inside componentDidMount() when recieving a message with websockets?