Upon rerender, React fails to refresh the style changes

Question

Upon rerender, React fails to refresh the style changes

I am encountering an issue with my React component where the visibility and position can be changed by the user.

Currently, the visibility can be toggled by adding or removing a CSS class, while the position is adjusted through a function that updates the top and left values after a Drag & Drop interaction.

The problem arises when React fails to update the style upon rerendering the component for visibility changes.

class MoveableCard extends React.Component {
    ...
    render() {
        ...
        return <div className={(this.props.isVisible ? '' : 'hide')}
                    draggable="true" onDragStart={dragStart}
                    style={{top:'initial', left:'initial'}}>
            ...
        </div>
    }
}



function dragStart(event) {
    var style = window.getComputedStyle(event.target, null)
    event.dataTransfer.setData("text/plain", JSON.stringify({
        id:event.target.getAttribute('data-reactid'),
        x:(parseInt(style.getPropertyValue("left"),10) - event.clientX),
        y:(parseInt(style.getPropertyValue("top"),10) - event.clientY)
    }))
}
function dragOver(event) {
    event.preventDefault()
    return false
} 
function drop(event) {
    let data = JSON.parse(event.dataTransfer.getData("text/plain"))
    let el = document.querySelectorAll("[data-reactid='" + data.id + "']")[0]

    el.style.left = (event.clientX + parseInt(data.x, 10)) + 'px'
    el.style.top = (event.clientY + parseInt(data.y, 10)) + 'px'

    event.preventDefault()
    return false
}
document.body.addEventListener('dragover',dragOver,false)
document.body.addEventListener('drop',drop,false)

Initially, the Card's style shows

style="top: initial; left: initial;"

.

After being moved, the style changes to style="top: 162px; left: 320px;".

However, when the Card is hidden using the class hide, the style remains the same style="top: 162px; left: 320px;", despite attempts to reset it.

I am looking for a solution to force React to update the style accordingly or explore alternative methods to achieve this functionality.

javascript css reactjs drag-and-drop

Answer 1

Answer №1

Summary:

Utilize inner state and the component lifecycle for handling event functions.

Detailed Explanation:

It is advisable to place event handlers within the component itself rather than using global methods. Here is an example of setting up event handlers inside a React component:

class MoveableCard extends React.Component {
  dragStart(event) {}
  dragOver(event) {}
  drop(event) {}
}

To ensure proper binding of 'this' context in the component, you can bind the event handler functions in the constructor or use arrow functions within the render method:

constructor() {
  this.dragStart = this.dragStart.bind(this);
  this.dragOver = this.dragOver.bind(this);
  this.drop = this.drop.bind(this);
}

In order to update or re-render the component, you should modify its inner state. Initialize the state with default values during componentWillMount:

componentWillMount() {
  this.state = { top: 0, left: 0 };
}

Within the event handlers, update the top and left properties on the inner state using this.setState, which will trigger a re-render:

drop() {
   // Assuming you have set this.left and this.top in the dragOver method
   this.setState({ top: this.top, left: this.left });
}

After updating the state, you can access the updated values in your render method like this:

render() {
  return (
    <div className={(this.props.isVisible ? '' : 'hide')}
         draggable="true"
         onDragStart={this.dragStart}
         style={{top: this.state.top, left: this.state.left}}>
    </div>
  );
}

Answer 2

Summary:

Utilize inner state and the component lifecycle for handling event functions.

Detailed Explanation:

It is advisable to place event handlers within the component itself rather than using global methods. Here is an example of setting up event handlers inside a React component:

class MoveableCard extends React.Component {
  dragStart(event) {}
  dragOver(event) {}
  drop(event) {}
}

To ensure proper binding of 'this' context in the component, you can bind the event handler functions in the constructor or use arrow functions within the render method:

constructor() {
  this.dragStart = this.dragStart.bind(this);
  this.dragOver = this.dragOver.bind(this);
  this.drop = this.drop.bind(this);
}

In order to update or re-render the component, you should modify its inner state. Initialize the state with default values during componentWillMount:

componentWillMount() {
  this.state = { top: 0, left: 0 };
}

Within the event handlers, update the top and left properties on the inner state using this.setState, which will trigger a re-render:

drop() {
   // Assuming you have set this.left and this.top in the dragOver method
   this.setState({ top: this.top, left: this.left });
}

After updating the state, you can access the updated values in your render method like this:

render() {
  return (
    <div className={(this.props.isVisible ? '' : 'hide')}
         draggable="true"
         onDragStart={this.dragStart}
         style={{top: this.state.top, left: this.state.left}}>
    </div>
  );
}

Answer 3

Answer №2

After considering the insights provided by Andrew, dejakob, and Chris, I have managed to come up with a solution - a big thank you to all of you :)

Initially, I was under the impression that I couldn't move the Functions into the Component because the Drop Event with the final position was emitted by the element where I dropped my Card, not by the Card itself.

However, I discovered a dragend Event that is emitted by the Card itself and contains the position information.

Using this event, I could easily set the position in the state (and remove it via a ref to unsetPosition in the parent component).

class MoveableCard extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            styles: {top:'initial', left:'initial'}
        }
        this.drop = this.drop.bind(this);
    }

    dragStart(e) {
        let style = window.getComputedStyle(e.target, null)

        this.setState({l: parseInt(style.getPropertyValue("left")) - e.clientX, y: parseInt(style.getPropertyValue("top")) - e.clientY})
    }

    drop(e) {
        this.setState({left: this.state.l + e.clientX, top: this.state.y + e.clientY})

        e.preventDefault()
        return false
    }

    unsetPosition() {
       this.setState({styles: {top:'initial', left:'initial'}})
    }

    render() {
        return <div className={(this.props.isVisible ? '' : 'hide')}
                    draggable="true"
                    onDragStart={this.dragStart}
                    onDragEnd={this.drop}
                    style={this.state.styles}>
            ...
        </div>
    }
}

Answer 4

After considering the insights provided by Andrew, dejakob, and Chris, I have managed to come up with a solution - a big thank you to all of you :)

Initially, I was under the impression that I couldn't move the Functions into the Component because the Drop Event with the final position was emitted by the element where I dropped my Card, not by the Card itself.

However, I discovered a dragend Event that is emitted by the Card itself and contains the position information.

Using this event, I could easily set the position in the state (and remove it via a ref to unsetPosition in the parent component).

class MoveableCard extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            styles: {top:'initial', left:'initial'}
        }
        this.drop = this.drop.bind(this);
    }

    dragStart(e) {
        let style = window.getComputedStyle(e.target, null)

        this.setState({l: parseInt(style.getPropertyValue("left")) - e.clientX, y: parseInt(style.getPropertyValue("top")) - e.clientY})
    }

    drop(e) {
        this.setState({left: this.state.l + e.clientX, top: this.state.y + e.clientY})

        e.preventDefault()
        return false
    }

    unsetPosition() {
       this.setState({styles: {top:'initial', left:'initial'}})
    }

    render() {
        return <div className={(this.props.isVisible ? '' : 'hide')}
                    draggable="true"
                    onDragStart={this.dragStart}
                    onDragEnd={this.drop}
                    style={this.state.styles}>
            ...
        </div>
    }
}

Upon rerender, React fails to refresh the style changes

Answer №1

Answer №2

Similar questions

Programmatically adjusting the color of mask images - Creative image theming

How can we modify this function to interpret multiple selections at once?

Create a single declaration in which you can assign values to multiple const variables

What is the best approach to accumulate model data in an Angular JS service or controller through a series of consecutive calls?

When the email field is changed, the string is not being set to the state if it is

The contenteditable div's selectAll feature doesn't function properly when it gains focus

Learn how to insert JavaScript code into the head of an iframe using jQuery

What is the reason that elements with % properties totaling 100% do not align next to each other?

Sorting Columns in JQuery Datatables

Error: Running the command 'yarn eg:'live-server'' is not a valid internal or external command

Filtering rows in JQgrid is made easy after the addition of a new record

Is it possible to run my NPM CLI package on CMD without needing to install it globally beforehand?

Incorporating a specific time to a JavaScript date object

Executing getJSON requests in perfect synchronization of time

Limiting the Maximum Height of 'material-react-table'

I encountered a problem with my code where the effect callbacks are synchronous to avoid race conditions. I am currently struggling to format it in the desired manner

Enhanced User Experience Through Triggered Content Recommendations based on Scrolling Patterns

Issue with jQuery fadeTo() not working after appendTo() function completes

The PHP random number generator appears to be malfunctioning when being compared to the $_POST[] variable

Having trouble retrieving data from redux toolkit using typescript