Dragging and Dropping in typescrip/ react

Question

I'm making my first hobby project with the scoreboard of the Swedish first league in football. I want to make a function where the season could be predicted via a drag and drop component in typescript and react. But the drag and drop doesnt work as of yet and I need help fixing it. (tried using chatgpt for this simple question but the answear was vague)

Here's the code:

interface Teams{
    position : number;
    name : string;
    image : string;
    matches?: number;
    wins ?: number;
    draws ?: number;
    losses ?: number;
    goals ?: number;
    points ?: number;
    children?: React.ReactNode;
}

const teamInfo: Teams[] = [
    {
        position: 1,
        name: "AIK",
        image: "./images/AIK_logo.svg.png"
    },
    {
        position: 2,
        name: "BK Häcken",
        image: "./images/bkh.png"
    },
    {
        position: 3,
        name: "Degerfors IF",
        image: "./images/Degerfors_IF.png"
    },
    {
        position: 4,
        name: "Djurgården IF",
        image: "./images/DIF_primar_skold_RGB.png"
    },
    {
        position: 5,
        name: "Hammarby IF",
        image: "./images/Hammarby_IF_logo.svg.png"
    },
    {
        position: 6,
        name: "IF Brommapojkarna",
        image: "./images/IF_Brommapojkarna_logo.svg.png"
    },
    {
        position: 8,
        name: "IF Elfsborg",
        image: "./images/IF_Elfsborg_logo.svg.png"
    },
    {
      position: 9,
      name: "IFK Göteborg",
      image: "./images/IFK-favicon.png"
    },
    {
      position: 10,
      name: "IFK Norrköping",
      image: "./images/IFK_Norrkoping_logo.svg.png"
   },
    {
      position: 11,
      name: "IFK Värnamo",
      image: "./images/IFK_Varnamo_logo.svg.png"
     },
    {
      position: 12,
      name: "IK Sirius",
      image: "./images/IK_Sirius_logo.svg.png"
  },
    {
      position: 13,
      name: "Kalmar FF",
      image: "./images/kalmarff_2023_emblem.png"
  },
    {
      position: 14,
      name: "Malmö FF",
      image: "./images/malmo.png"
  },
    {
      position: 15,
      name: "Mjällby AIF",
      image: "./images/mjallby2.png"
  },
    {
      position: 16,
      name: "Varbergs BOIS",
      image: "./images/Varbergs_BOIS_logo.svg.png"
  }
    
]



const TableRow = () => {
  const [teams, setTeams] = useState(teamInfo);

  const handleDragEnd = (result: DropResult) => {
  console.log(result); // log the result to check if it has the expected values
  if (!result.destination) return;
  const newTeams = [...teams];
  const [reorderedTeam] = newTeams.splice(result.source.index, 1);
  newTeams.splice(result.destination.index, 0, reorderedTeam);
  setTeams(newTeams);
};


  return (
    <div className="middle">
      <DragDropContext onDragEnd={handleDragEnd}>
        <Droppable droppableId="teams">
          {(provided) => (
            <div {...provided.droppableProps} ref={provided.innerRef}>
              {teams.map((teamInfo, index) => (
                <Draggable
                  key={teamInfo.position.toString() + index}
                  draggableId={teamInfo.position.toString()}
                  index={index}
                >
                  {(provided) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                    >
                      <div className="rows">
                        <div className="image-container">
                          <img src={teamInfo.image} alt={teamInfo.name} />
                        </div>
                        <div className="info-container">
                          <h1 className="name">
                            {' '}
                            {teamInfo.position} {teamInfo.name}{' '}
                          </h1>
                        </div>
                      </div>
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    </div>
  );
};
  export default TableRow;

Thanks in advance!

Tried to make the rows for the teams draggable and droppable. Neither works

Dragging and Dropping in typescrip/ react

0 Answers0