reactjs - During drag and drop if any component hover over the current component, the current component changes it's style.. This is not happening as expected? -

import react 'react'; import { finddomnode } 'react-dom'; import { droptarget } 'react-dnd'; import html5backend 'react-dnd-html5-backend';   let newstyle = {'display':'none','left':'0px'} ;  let target = {     hover(props,monitor,component){         newstyle.display = 'block';         newstyle.left = monitor.getclientoffset().x-finddomnode(component).getboundingclientrect().left+'px';         //the current mouse position "on hover indicator" expected          return;     },     drop(props, monitor,component) {         newstyle.display = 'none';         newstyle.left = '0px';         return props;     } }  function collect(connect, monitor) {     return {         connectdroptarget: connect.droptarget(),     }; }  class component extends react.component {      constructor(props){         super(props);     }      render = () => {          const { connectdroptarget } = this.props;         return connectdroptarget(             <div>               <span style = { newstyle }> on hover indicator </span>               // here component drops wrapped within div!             </div>         )     } }  export default droptarget('type', target, collect)(component); 

in hover callback if log left property of newstyle object displays current mouse position expected not change style of span in render method.

any appreciated. in advance.

just changing value of variable used in react won't force rerender - changing value of newstyle won't anything. react component rerender need either a) call setstate or b) call forceupdate.

what could instead make update new style on hover add state, , manipulate state within hover function, maybe this:

import react 'react'; import { finddomnode } 'react-dom'; import { droptarget } 'react-dnd'; import html5backend 'react-dnd-html5-backend';  let target = {     hover(props,monitor,component) {         let newstyle = {};         newstyle.display = 'block';         newstyle.left = monitor.getclientoffset().x-finddomnode(component).getboundingclientrect().left+'px';          component.setstate({ style: newstyle });         return;     },     drop(props, monitor,component) {         let newstyle = {}         newstyle.display = 'none';         newstyle.left = '0px';          component.setstate({ style: newstyle });         return props;     } }  function collect(connect, monitor) {     return {         connectdroptarget: connect.droptarget(),     }; }  class component extends react.component {      constructor(props){         super(props);     }      state = {       style: { display: 'none', left: '0px' }     }      render = () => {          const { connectdroptarget } = this.props;         return connectdroptarget(             <div>               <span style={ this.state.style }> on hover indicator </span>               // here component drops wrapped within div!             </div>         )     } }  export default droptarget('type', target, collect)(component); 

note component.setstate() within both hover , drop functions, force component re-render. 'component' in instance reference instance of component, have access it's state if need read state else. check out section of react's lifecycle docs if want more of idea doing wrong: https://facebook.github.io/react/docs/react-component.html#setstate