I want to be able to show the items I pulled from the database by filtering, but I can't pull the data as I want. I am using Reactjs

Question

I want to be able to show the items I pulled from the database by filtering, but I can't pull the data as I want. This is the part where I pulled the data from.json. I can get item data, get their ids, but I cannot extract data from extras.

onClickEvent = async (dispatch, id, e) => {
        
    const item_extra = await axios.get(`http://localhost:3001/item_extra/?item_id=${id}`);
    console.log(item_extra.data);
    var extra_ids = [];
    item_extra.data.forEach( (elem) => {
        extra_ids.push(elem.extra_id);
        
    });
    console.log(extra_ids)
    dispatch({
        type: "GET_EXTRAS",
        payload: extra_ids
    });

    this.setState({
        isVisible: !this.state.isVisible,
    })
    
    
}

---

The view looks like

            {
                value => {
                    const { dispatch } = value;
                    console.log(this.state.extras);
                    return (

                        <div className="card" >
                            <div className="col-sm-6">
                                <img className="card-img-top" width="150" height="100" src={image} alt="Card "></img>
                                <div className="card-body">
                                    <h5 className="card-title">{name}</h5>
                                    <p className="card-text">Price: {price} €</p>
                                    <h5><span className="badge badge-pill badge-warning" onClick={this.onClickEvent.bind(this, dispatch, id)}>Buy</span></h5>
                                </div>

                                {
                                    isVisible ? <form>
                                        
                                        {extras.map((elem, key) => 
                                    
                                                <div className="card-body">
                                                    <label>{key}</label>
                                                    <label hidden>{key}</label>
                                                    <label hidden>{elem.id}</label>
                                                    <label>{elem.extra_name}</label>
                                                    <input className="extras" type="checkbox"></input>
                                                    <span>{elem.extra_price}</span>
                                                </div> 
                                        )}

                                    </form> : null
                                }
                            </div>
                        </div>

                    )
                }
            }
        </ItemConsumer>

---

the part I'm filtering

case "GET_EXTRAS":
            
            
        return {
            ...state,
            extras: state.extras.filter(extra => action.payload=== extra.id)
        }

---

[{…}] 0: {} length: 1 proto : Array(0)

Answer 1

action.payload is an array of ids so you need to check against all ids to get extras

case "GET_EXTRAS":

  return {
     ...state,
       extras: state.extras.filter(extra => action.payload.includes(extra.id) )
  }