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 from 'react';
import { findDOMNode } from 'react-dom';
import { DropTarget } from 'react-dnd';
import HTML5Backend from '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 where the "on hover indicator" is 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 another component drops wrapped within div!
            </div>
        )
    }
}

export default DropTarget('type', target, collect)(component);

In hover callback if I log my left property of newStyle object it displays the current mouse position as expected but it does not change the style of the span in the render method.

Any help would be appreciated. Thanks in advance.

Just changing the value of a variable used in React won't force a rerender - just changing the value of newStyle won't do anything. To get a React component to rerender itself you need to either a) Call setState or b) Call forceUpdate.

What you could do instead to make it update with the new style on hover would be to add it to the state, and then manipulate that state within the hover function, maybe something like this:

import React from 'react';
import { findDOMNode } from 'react-dom';
import { DropTarget } from 'react-dnd';
import HTML5Backend from '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 another component drops wrapped within div!
            </div>
        )
    }
}

export default DropTarget('type', target, collect)(component);

Note the component.setState() within both the hover and drop functions, this will actually force the component to re-render. 'component' in this instance is actually a reference to the instance of the component, so you have access to it's state from that as well if you need to read the state to do anything else. Check out this section of React's lifecycle docs if you want to get more of an idea what you were doing wrong: https://facebook.github.io/react/docs/react-component.html#setstate