Как отфильтровать данные из сопоставленных данных в реакции

Question

Я показываю карты с данными, сопоставленными с ценой и местоположением

  return data.map( FD1 => (

       <Row>
         <Card className="card">
            <Card body className="text-center">

               <CardTitle data-es-label="location"> Location:
                       {FD1.Departure}
               </CardTitle>


                <CardText data-es-label="Price">Price
                        {FD1.price} 
                   </CardText>


              <label>
                  <Checkbox
                      id={FD1.FlightID}
                    name={FD1.FlightID}
                  checked={this.state.checked === FD1.FlightID}
                 onChange={this.handleCheckboxChange}/>
                      <span>Select</span>
               </label>

      <CardActions>'

У каждой карты есть флажок, и моя идея заключалась в том, чтобы установить и отправить флажок - информация, сопоставленная с этой картой, будет отправлена ​​для «бронирования».

Возможно ли отфильтровать данные из сопоставленных данных. Каждая «карта» с данными имеет уникальный идентификатор. Как отфильтровать данные по карте и отправить на страницу бронирования с подробной информацией?

В тот момент, когда я выбираю флажок, они все выбирают.

 handleCheckboxChange = event =>
        this.setState({ checked: event.target.checked });

РЕДАКТИРОВАТЬ: попытка - это то, что я пытался

  handleCheckboxChange = event =>
        this.setState({ checked: event.target.checked });

   Select(FD) {

 this.state={checked:FD.FlightID};

       return(
            <label>
                <Checkbox id={FD.FlightID}
                          name={FD.FlightID}
                          checked={this.state.checked}
                          onChange={this.handleCheckboxChange}
                />
                <span>Select</span>
            </label>



        )
    }

Вы знаете, где я ошибся?

Answer 1

в проверенное состояние сохраните FD1.FlightID вместо true / false, и вы будете точно знать, какая карта была проверена.

и затем при отправке вы можете отправить соответствующие данные, используя this.state.checked (идентификатор проверяемой карты)

Answer 2

В коде внутри вашей функции «map» «this» все еще ссылается на родительский компонент. Таким образом, у вас есть только одно проверенное состояние. Вот почему все ваши флажки показывают одинаковое поведение.

Более чистым решением было бы определить новый компонент с сохранением состояния "CardRow", в котором есть все внутри карты, плюс собственное состояние и функция handleCheckboxChange.