Как я могу получить данные этого пользователя, нажав?

Question

Мне нужно нажать на пользователя из списка пользователей, справа, чтобы отобразить больше информации о нем.Теперь отображается случайный пользователь.Нужно ли мне получать его индекс и сравнивать его?Помогите понять и найти нужную информацию, которая поможет понять этот

        {this.props.testStore.map((arrayItem, index) =>
              <Grid >
                  <Grid.Column mobile={16} tablet={6} computer={5}>
                      <Image src={randomUser.general.avatar} />
                  </Grid.Column>
                  <Grid.Column mobile={16} tablet={10} computer={11}>
                      <h2>{`${randomUser.general.firstName} ${randomUser.general.lastName}`}</h2>
                      <h3>Company: {randomUser.job.company}</h3>
                      <h3>Position: {randomUser.job.title}</h3>
                      <h4>
                          Contact:
                          <p><Icon name='mail' size='small' /> <a href="mailto:Gerry_Hackett77@gmail.com">{randomUser.contact.email}</a></p>
                          <p><Icon name='phone'  size='small' /> <a href="tel:8959840132">{randomUser.contact.phone}</a></p>
                      </h4>
                      <p><strong>Address:</strong> {`${randomUser.address.street}, ${randomUser.address.city}, ${randomUser.address.country}`}</p>
                  </Grid.Column>
              </Grid>
          )}

массив с пользователями testStore

const randomUser = this.props.testStore[8];

Вот мой пример кода большеподробно -> здесь

Answer 1

Вы можете передать index (или пользователя id, если он у вас есть) в this.handleClick.
Затем внутри обработчика вы можете установить его:

  handleClick(selectedIndex) {
    this.setState({ selectedIndex });
  }

И затем вВаш рендер:

  render() {
    const { selectedIndex } = this.state;
    const randomUser = this.props.testStore[selectedIndex];
...

Но не забудьте иметь начальное значение в конструкторе:

  constructor(props) {
    super(props);
    this.state = {
      selectedIndex: 0,
      show: true
    };
    this.searchHandler = this.searchHandler.bind(this);
  }

Answer 2

Вы можете передать arrayItem в функцию handleClick

onClick={() => {
  this.handleClick(arrayItem);
  this.toggleAside();
}}

, а затем setState с этим элементом на handleClick

handleClick = arrayItem => {
  this.setState({ selected: arrayItem });
};

, а затем получить выбранного пользователя из состояния в вашем методе рендеринга иотобразить нужную информацию.

const randomUser = this.state.selected;

и отобразить только этого пользователя

{randomUser &&
  // code to display here
}