Есть компонент список точек маршрута. Есть компонент точки и компонент редактирования точки маршрута. При клике на кнопку необходимо менять компонент точки на компонент редактирования. Но на странице должен быть открыт только один комп редактирования. При повторном клике на кнопку точки нужно закрыть редактирование и открыть его в кликнутой точке. Понимаю, что лучше привязаться к id, делать сравнение и менять компоненты, но на код это понимание переложить не могу.
Зарание спасибо!
import {useState} from "react";
function PointComponent() {
const [isClicked, setClicked] = useState < boolean > (false);
const handleOnClick = () => {
setClicked(true);
};
return (
<>
{isClicked ?
<EditPointComponent/> :
(<li className="trip-events__item">
<button
className="event__rollup-btn"
type="button"
onClick={handleOnClick}
>
</button>
</li>)}
</>
)
}
export default PointComponent;
function PointsList() {
return (
<>
{points.map((point) => (
<PointComponent
point={point}
key={point.id}
isActive={() => setActivePoint(point.id)}
/>
))}
</>
);
}
export default PointsList;
PointComponent
пропсом передавать выбран он (если выбранное ИД совпадает с его ИД) или нет.