How to pass each component id - reactjs

Question

I want to implement dragging components (beautiful dnd) so that the user can swap them. But for this, each component must have an id, as I understand it. But I do not know how to do it
import React from 'react';
import CardWeather from '../cardWeather/CardWeather';
import WeatherMap from '../cardWeatherMap/WeatherMap';
import Forecast from '../forecast/Forecast';
import WeatherGrapth from '../weatherGraph/WeatherGraph';
import './main.scss';
import { Droppable } from 'react-beautiful-dnd';
const Main = () => {
return (
<>
<Droppable droppableId="main">
{
(provided) => (
<div className="main-container"
ref={provided.innerRef}
{...provided.droppableProps}
>
<CardWeather />
<Forecast/>
<WeatherGrapth/>
<WeatherMap/>
</div>
)
}
</Droppable>
<div className="pr">weather app</div>
</>
)
}
export default Main;

Answer 1

Hi, to do that you also need to use Draggable Component importing from 'react-beautiful-dnd'.
And also if you don't have unique ids for your items you can use 'react-uuid' package to pass through to 'draggableId'. It will create unique ids for you.
And also I am highly recommending to you watch this course about "react-beautiful-dnd". This course was created by who developed "react-beautiful-dnd".
https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd
import React from 'react';
import CardWeather from '../cardWeather/CardWeather';
import WeatherMap from '../cardWeatherMap/WeatherMap';
import Forecast from '../forecast/Forecast';
import WeatherGrapth from '../weatherGraph/WeatherGraph';
import './main.scss';
import { Droppable, Draggable } from 'react-beautiful-dnd';
import uuid from 'react-uuid';
const Main = () => {
return (
<>
<Droppable droppableId="main">
{
(provided) => (
<Draggable
draggableId={uuid()}
index={"element index"}
>
{(provided, snapshot) => {
<div className="main-container"
ref={provided.innerRef}
{...provided.droppableProps}
isDragging={snapshot.isDragging}
>
<CardWeather />
<Forecast />
<WeatherGrapth />
<WeatherMap />
</div>
}}
</Draggable>
)
}
</Droppable>
<div className="pr">weather app</div>
</>
)
}
export default Main;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

If I get this correctly you need to have some kind of id for every component in your case:
<CardWeather />
<Forecast/>
<WeatherGrapth/>
<WeatherMap/>
You can pass the id by props for each component. Example:
Main component:
<CardWeather id="1" />
CardWeather component:
function CardWeather(props){
const id = props.id
...
return(
<div data-id={id}>
...
</div>
)
}
...
And you have to do that for every component you want to drag and drop.

Answer 3

It's best to have also a key prop to each component. So that if I'd changes you will get a rerender.