Первая карточка моего аккордеона React Bootstrap не открывается

Question

Я создаю приложение со списком велосипедов basi c. Я хочу скрыть детали велосипеда внутри аккордеона и загружать их только тогда, когда пользователь открывает карточку велосипеда. Он работает для всех элементов, кроме первого.

Для этого я пишу следующий код:

return data.bikes.map((bike, index) => {
    return(
      <Card key={index} onClick={(e) => {this.setState({selected: bike.id});}}>
        <Card.Header>
          <Accordion.Toggle as={Button} variant="link" eventKey={index}>
            {bike.title}, {index}
          </Accordion.Toggle>
        </Card.Header>
        <Accordion.Collapse eventKey={index}>
          <Card.Body>
            Bike Details:
            <BikeDetails bikeId={this.state.selected}/>
          </Card.Body>
        </Accordion.Collapse>
      </Card>
    )
  }); 

Чтобы открыть первый элемент, я меняю свой код следующим образом:

  return data.bikes.map((bike, index) => {
    return(
      <Card key={index+1} onClick={(e) => {this.setState({selected: bike.id});}}>
        <Card.Header>
          <Accordion.Toggle as={Button} variant="link" eventKey={index+1}>
            {bike.title}, {index}, {index+1}
          </Accordion.Toggle>
        </Card.Header>
        <Accordion.Collapse eventKey={index+1}>
          <Card.Body>
            Bike Details:
            <BikeDetails bikeId={this.state.selected}/>
          </Card.Body>
        </Accordion.Collapse>
      </Card>
    )
  });

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

Ссылка на CodeSandbox: https://codesandbox.io/s/keen-pond-v5y2y?fontsize=14&hidenavigation=1&theme=dark

Answer 1

Лучшее решение - назначить bike.id для eventKey, потому что вы уже назначаете index ключу карты как уникальный ключ для каждой карты. он отлично работает таким образом.

return data.bikes.map((bike, index) => {
    return(
      <Card key={index} onClick={(e) => {this.setState({selected: bike.id});}}>
        <Card.Header>
          <Accordion.Toggle as={Button} variant="link" eventKey={bike.id}>
            {bike.title}, {index}
          </Accordion.Toggle>
        </Card.Header>
        <Accordion.Collapse eventKey={bike.id}>
          <Card.Body>
            Bike Details:
            <BikeDetails bikeId={this.state.selected}/>
          </Card.Body>
        </Accordion.Collapse>
      </Card>
    )
  });

Answer 2

Ответил Chandradeepta Laha :

В свойстве eventKey вместо index укажите bike.id. Это должно работать