the isDragging variable is not being updated correctly and hence the border color is not changing{Using dnd-kit}

Question

The result should be that once I drag the element it should change the border color to pink.

I tried putting this but then it just makes the border pink on reload without dragging: item: { id: id },

import React from 'react';
import { useDraggable } from '@dnd-kit/core';

export default function Movableimg({id,src,atext}) {
    const { isDragging, attributes, setNodeRef } = useDraggable({
        id: id,
        type: 'image' 
    });

    return (
        <img 
            ref={setNodeRef} 
            src={src} 
            alt={atext}
            style={{ border: isDragging ? '5px solid pink' : 'none' }}
        />
    );
}`


The id,src and atext are given correctly in the other file
`{Allimages.map ((ele) =>
          {
            return<Movableimg key={ele.id} src = {ele.src} id = {ele.id} alt = {ele.atext}/>;
          })
        }

Answer 1

You should add div around it and put ternary there in className.

Remember that the border will change size of dragged element. To avoid that you can use transparent border or add border size x2 to width or/and height of element.

import React from 'react';
import { useDraggable } from '@dnd-kit/core';

export default function Movableimg({id,src,atext}) {
    const { isDragging, attributes, setNodeRef } = useDraggable({
        id: id,
        type: 'image' 
    });

    return (
     // instead of empty string you can use transparent border to avoid jumping while dragging
     <div className={isDragging ? 'classNameWithPinkBorder' : ''} >
        <img 
            ref={setNodeRef} 
            src={src} 
            alt={atext}
        />
     </div>
    );
}`


The id,src and atext are given correctly in the other file
`{Allimages.map ((ele) =>
          {
            return<Movableimg key={ele.id} src = {ele.src} id = {ele.id} alt = {ele.atext}/>;
          })
        }