Как изменить элемент array на клик?

Question

[nivaech]

Есть array с фотографиями, который рендерится с помощью map:

<div className="about-pictures-container">
                { images.map(image => {
                  return (
                    <ImageCard
                    key = {person.id}
                    name = {eng ? person.nameENG : person.nameRU}
                    image = {person.img}
                    bio = {eng ? person.bioENG : person.bioRU}
                    />
                  )
                }) }
              </div>

Так выглядит сам компонент картинки.

<div className="image-card">
                            <div className="card-image-info-container">
                                <img className={"bio-img " + (showBio ? "invisible" : null)} src={image} onClick={toggleBio} />
                                <div className={"bio-text-container " + (showBio ? "bio-visible" : null)}>
                                    <p className="card-bio"> {bio} </p>
                                    <button className="btn bio-btn" onClick={() => toggleBio(id)}>Close</button>
                                </div>
                            </div>       
                            <p className="image-card-name"> {name} </p>
                        </div>

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

toggleBio = id => {
      this.setState({
        showBio: ! this.state.showBio
      })
    }

Функция работает каряво, потому что на клик изменяет стейт абсолютно всех элементов. Знаю, что нужно на клик сделать проверку id, но пока не до конца понимаю как именно это сделать.
Как сделать так, чтобы изменялось состояние только того элемента, на который кликнул пользователь?

Comments

[Дмитрий Свиридов]

Сделай так, чтобы у компонента картинки был свой стейт - и в toggleBio (этот метод засунь в этот же компонент картинки) меняй его. id тебе туда передавать не нужно. Судя по всему, ты пытаешься менять стейт, который относится к компоненту со списком картинок.

Answer 1

[Антон Спирин]

Можно просто менять состояние карточки:

const ImageCard = ({ image, bio }) => {
  const [showBio, setShowBio] = useState(false);
  const handler = useCallback(() => {
    setShowBio(state => !state);
  }, []);

  return (
    <Wrapper>
      {showBio ? <Bio bio={bio} /> : <Image src={image} />}
      <Button onClick={hanlder}>Show bio</Button>;
    </Wrapper>
  );
};

Comments

[nivaech]

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