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

1 ответ 1

0

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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