0

Есть компонент список точек маршрута. Есть компонент точки и компонент редактирования точки маршрута. При клике на кнопку необходимо менять компонент точки на компонент редактирования. Но на странице должен быть открыт только один комп редактирования. При повторном клике на кнопку точки нужно закрыть редактирование и открыть его в кликнутой точке. Понимаю, что лучше привязаться к 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;
5
  • У вас в представленном коде нет компонента RoutePointComponent, который, как я подозреваю, рендерит PointComponent. Сейчас, в предоставленном коде, это 2 никак не связанных между собой компонента
    – SwaD
    Commented 9 янв. 2023 в 14:10
  • Виноват, исправил
    – javaPepper
    Commented 9 янв. 2023 в 14:33
  • Выкладывйте ваш код тут по этой инструкции
    – EzioMercer
    Commented 9 янв. 2023 в 16:24
  • Нужно стейтовую переменную перенести в материнский компонент. Хранить в ней ИД "кликнутого" компонента. А в PointComponent пропсом передавать выбран он (если выбранное ИД совпадает с его ИД) или нет.
    – ksa
    Commented 9 янв. 2023 в 16:41
  • @ksa Спасибо за подсказку.
    – javaPepper
    Commented 10 янв. 2023 в 16:32

1 ответ 1

0

Итак, решил таким образом: в компоненте точки диспатчу активный id. В компоненте списка получаю активный id и прокидываю пропсу isActive={id === point.id}. В компоненте точки получаю пропсу и через условный рендеринг реализую логику.

Без примеров кода смог таки сам разобраться. Всем спасибо!

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.