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

Bootstrap 3 Full-Width Responsive Image Overlapping

Interactive Bar chart updates in real-time with Highcharts and AngularJs

Next.js encountered an error while trying to locate the flowbite.min.js file for Tailwindcss and Flowbite, resulting in a

Error: The function theme.spacing is not recognized as a valid function

How can I make Material UI's grid spacing function properly in React?

Interact with concealed form using Semantic UI React reveal feature

Error: The function this.state.patients.map is not iterable

Guide to centering a list on a webpage using Bootstrap 3

React: Error Caused by Invariant Violation (minus table)

What other options are available for achieving the same functionality as FormData.delete() given its low level of support?

The functionality of the button in my script is limited to a single use

What is the best way to direct the next input focus when pressing Enter in ReactJS?

What steps do I need to take to ensure the CSS hover effect functions properly?

Guide to creating dependent form fields in ReactJS

Solution for displaying as a table cell in Internet Explorer 6 and 7: Workaround

Having two identical select2 forms on the same page

How can I ensure that a particular component type passes the typescript check in a react-typescript project?

Module gulp.js not found

Tips for utilizing a for loop within an array extracted from a jQuery element for automation

Guide to creating intricate designs on an HTML5 Canvas, one pixel at a time