如何在Reactjs中进行映射和过滤

Question

carModel:
          [
           {_id : A, title : 2012},
           {_id : B, title : 2014}
          ],

car:      [{
            color    :'red',
            carModel : B //mongoose.Schema.ObjectId
           },
           {
            color    :'black',
            carModel : B //mongoose.Schema.ObjectId
           }     
          ]      

Here i add carModel ID on car's carModel and trying to filter on my react page

car.map(item=> 
              <p>{item.color}</p>
              <p>{carModel.map(model=> model.filter(model._id == item.carModel ? model.title : null)}
       )

I want to show carModel on page, here above code is not working and i believe this is not an exact method to do this, please rectify me

Answer 1

You can use following:

car.map(item=> {
  const filteredModels = carModel.filter(model => model._id === item.carModel);
  return (
    <div>
      <p>{item.color}</p>
      {filteredModels.map(model => <p>{model.title}</p>)}
    </div>
  );      
})

Answer 2

You need to return your elements like this to make it work. Also wrapping your elements with a div or something

car.map(item=> 
  return (<div>
    <p>{item.color}</p>
    <p>{carModel.map(model=> model.filter(model._id == item.carModel ? model.title : null)}
   </div>)
)

Answer 3

filter method callback parameter is a function and you need to return one element in map function, so;

car.map(item=> {
  return (<div>
    <p>{item.color}</p>
      {carModel.filter(model => model._id === item.carModel).map(model => <p>{model.title}</p>)}
  </div>);
})

Answer 4

car.map(item=> {
  return (
    <p>{item.color}</p>
    {
      carModel.filter(model => model._id === item.carModel)
      .map(m => <p>{m.title}</p>)
    }
  );      
})