How to filter data from mapped data in react

Question

I am displaying cards with data mapped with a price and location

  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>'

Each card has a check box and my idea was when the check box is selected and submitted - the information mapped to that card will be sent to be 'booked'.

Is it possible to filter data from the mapped data. Each 'card' with the data has a unique id. How do I filter the data by card and send to a booking page with the details?

At the moment when I select a checked box they all select.

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

EDIT: attempt - this is what I have tried

  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>



        )
    }

Do you know where I have gone wrong?

Currently, the issue is that there is only a single checked state for all items. Instead try moving the mapped item into it's own component and moving the checked state into it — Agney
– Agney, Commented Apr 3, 2019 at 19:25

Dito · Accepted Answer · 2019-04-03 19:33:34Z

1

into the checked state save the FD1.FlightID instead of true/false and you will know exactly which card had been checked.

and then on submit you can send the appropriate data using this.state.checked (the id of checked card)

answered Apr 3, 2019 at 19:33

Dito

9952 gold badges11 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

andykenward Over a year ago

If you only need to select 1 card and send that card's data. Then I would do this.

Dito Over a year ago

even if he needs multiple values he can save ids as array and use that array later

andykenward Over a year ago

Yes, @Dito. But just clarifying what they are looking to accomplish.

Marisol Gutiérrez · Accepted Answer · 2019-04-03 19:35:49Z

0

In the code inside your "map" function, "this" is still referring to the parent component. So you only have one checked state. That's why all your checkboxes show the same behaviour.

A cleaner solution would be to define a new stateful component "CardRow" that has everything inside the map plus it's own state and handleCheckboxChange function.

answered Apr 3, 2019 at 19:35

Marisol Gutiérrez

1,0768 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to filter data from mapped data in react

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related