Показать элемент массива в другом компоненте по клику на него react.js

Question

вот основной компонент:

function NotesContainer() {
  const [isDisplayed, setIsDisplayed] = useState(false);

  const onChange = useCallback(() => setIsDisplayed(!isDisplayed), [
    isDisplayed,
  ]);

  return (
    <>
      <div className={styles.container}>
        {data.map((item, key) => (
          <Notes
            title={item.title}
            description={item.description}
            date={item.date}
            key={key}
            onChange={onChange}
          />
        ))}
      </div>
      <div>
        <DisplayNote isShow={isDisplayed} />
      </div>
    </>
  );
}

это компонент с заметками:

const Notes = ({ title, description, date, onChange, key }) => {
  return (
    <ListItem button onClick={onChange} key={key}>
      <div className={styles.row}>
        <div className={[styles.item, styles.title].join(" ")}>{title}</div>
        <div className={[styles.item, styles.description].join(" ")}>
          {description}
        </div>
        <div className={[styles.item, styles.date].join(" ")}>{date}</div>
      </div>
    </ListItem>
  );
};

а это блок, где должен показываться description той заметки, на кликнет юзер

const DisplayNote = ({ isShow }) => {
  const [isShow] = useState(false);

  return (
    <div className={styles.showBlock}>
      {isShow && (
        <>
          {data.map((item, key) => (
            <div key={key}>{item.description}</div>
          ))}
        </>
      )}
    </div>
  );
};

Сейчас, по клику на элемент, у меня показывается выводятся ВСЕ дескрипшены. А нужно, чтоб толкьо один именно того элемента, на котором был клик. Плюс, сейчас на первый жлемент если кликнуть, то выводятся все дескрипены,на следующий кликаю - они все исчезают. Помогити, пожалуйста!! Понимаю, что я не праильно маплю данные. Но я не мог уразобраться, в чем дело(((

Answer 1

Ваша проблема в о том, что вы показываете всю дату, а не конкретную запись

Простым решением может быть передача индекса нужной записи в функцию onChange, и вывод конкретной записи по индексу в DispalyNot

Также вот немного ревью, не благодарите

const DisplayNote = ({ isShow }) => {
  const [isShow] = useState(false);

  return (
    <div className={styles.showBlock}>
      {isShow && (
        <>
          {data.map((item, key) => (
            <div key={key}>{item.description}</div>
          ))}
        </>
      )}
    </div>
  );
};

Строчка с const [isShow] = useState(false); здесь не имеет смысла

isShow вы принимаете из Props

Также непонятно откуда вы получаете data

Data должна получаться из props или из hook, для того что-бы React мог корректно отлавливать изменения состония этой переменной

function NotesContainer() {
  const [isDisplayed, setIsDisplayed] = useState(false);

  const onChange = useCallback(() => setIsDisplayed(!isDisplayed), [
    isDisplayed,
  ]);

  return (
    <>
      <div className={styles.container}>
        {data.map((item, key) => (
          <Notes
            title={item.title}
            description={item.description}
            date={item.date}
            key={key}
            onChange={onChange}
          />
        ))}
      </div>
      <div>
        <DisplayNote isShow={isDisplayed} />
      </div>
    </>
  );
}

В этой строчке, лучше всего переименуйте переменную, например на handleChangeShowNot

Так как onChange совсем не говорит что вы меняете const onChange = useCallback(() => setIsDisplayed(!isDisplayed), [ isDisplayed, ]);

БЛОГ НА HUSL

Показать элемент массива в другом компоненте по клику на него react.js

Ответы (1 шт):