Вывод и замена элементов через react

Question

Вывод и замена элементов через react

Рейтинг: 0Ответов: 1Опубликовано: 26.01.2023

У меня есть отдельный js файл, в котором у меня храниться массив из объектов с данными.

const destination = [
  {
    id: 0,
    title: "moon",
    subtitle: "See our planet as you’ve never seen it before. A perfect relaxing trip away to help regain perspective and come back refreshed. While you’re there, take in some history by visiting the Luna 2 and Apollo 11 landing sites.",
    distance: "384,400 km",
    travelTime: "3 days",
  },
  {
    id: 1,
    title: "mars",
    subtitle: "Don’t forget to pack your hiking boots. You’ll need them to tackle Olympus Mons, the tallest planetary mountain in our solar system. It’s two and a half times the size of Everest!",
    distance: "225 mil. km",
    travelTime: "9 months",
  },
  {
    id: 2,
    title: "europa",
    subtitle: "The smallest of the four Galilean moons orbiting Jupiter, Europa is a winter lover’s dream. With an icy surface, it’s perfect for a bit of ice skating, curling, hockey, or simple relaxation in your snug wintery cabin.",
    distance: "628 mil. km",
    travelTime: "3 years",
  },
];

export default destination;

И у меня есть отдельная страница, куда я должен выводить эти данные.

const Destination = () => {
  return (
    <main>
      <div>
        <button>moon</button>
        <button>mars</button>
        <button>europa</button>
      </div>
      <div>
        <h1>Title</h1>
        <p>subtitle</p>
      </div>
    </main>

  );
};

Вопрос: У меня на странице 3 кнопки, подписаны соодветсвенно 1 - moon, 2 - mars, 3 - europa. Как мне сделать вывод только первого элемента, условно moon как стандартный, а при нажатии на 2 или 3 кнопку, контент с первой пропадал, и появлялся на 2 или 3 соответственно?

reactjs

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

В React такой переключатель контента делается примерно следующим образом:

const Destination = () => {
  const [dest, setDest] = useState(destination);
  const [selection, setSelection] = useState(0);

  return (
    <main>
      <div>
        {dest?.map((it, idx) => <button onClick={() => setSelection(idx)}>{it.title}</button>)}
      </div>

      <div>
        <h1>{dest[selection].title}</h1>
        <p>{dest[selection].subtitle}</p>
      </div>
    </main>

  );
};

Отрисовка кнопок должна идти с привязкой к текущему массиву, а не вбита "хардкорно".

Создаем кнопки из массива, кнопкам назначаем обработчик, который будет записывать в состояние выбранный номер элемента.

При изменении состояния, будет происходить ререндер компонента и будут выводиться данные выбранного элемента массива.

Вывод и замена элементов через react

Ответы