Как показать только один элемент в функции Gatsby .map? - PullRequest
Новая
       97

Как показать только один элемент в функции Gatsby .map?

1 голос
/ 20 июня 2020

Я новичок в Гэтсби. Я не знаю, что здесь делать ... пожалуйста, помогите мне ... Я хочу отображать только один элемент (h4), когда я нажимаю кнопку. Например, у меня есть 5 планов, и каждый план имеет одну кнопку и один тег h4. Когда я нажимаю третью кнопку, отображается только третий тег h4. Как и ожидалось в моем коде, при нажатии кнопки отображается тег h4 каждого элемента карты. Есть ли способ активировать / деактивировать компонент только для одного элемента карты в этом случае? Заранее спасибо. 

  import React, { useState } from "react"

  const TourPage = ({
      const [isOpen, setOpen] = React.useState(false)
      const toggleOpen = () => {
        setOpen(!isOpen)
      }

  return (
        <article>
           {plans.map((plan, index) => {
              return (
                <div key={index}>
                    <button
                      className="btn"
                      onClick={toggleOpen}
                    > button </button>
                    <div
                      className={`${isOpen ? "active" : "inactive"}`}
                    >
                      <h4>{plan.iternary}</h4>
                    </div>
                 </div>
               )
            })}
        </article>

1 Ответ

1 голос
/ 20 июня 2020

Вам необходимо иметь несколько состояний , состояние для каждого плана.

Вот простой пример, вы можете добиться этого, как хотите, но концепция та же: управлять несколькими состояния внутри компонента. 

const plans = [{ id: `id1`, iternary: "a1" }, { id: `id2`, iternary: "a2" }];

const INITIAL = {
  id1: false,
  id2: false
};

const TourPage = () => {
  const [openManager, setOpenManager] = React.useState(INITIAL);

  return (
    <article>
      {plans.map(plan => {
        const onClick = () => {
          setOpenManager(prev => ({ ...prev, [plan.id]: !prev[plan.id] }));
        };
        return (
          <div key={plan.id}>
            <button className="btn" onClick={onClick}>
              button
            </button>
            <div className={`${openManager[plan.id] ? "active" : "inactive"}`}>
              <h4>{plan.iternary}</h4>
            </div>
          </div>
        );
      })}
    </article>
  );
};

Отредактируйте empty-bu sh -ks4zw

...