Map Through Array Condiotionally

July 17, 2023

I am wondering, from the research I have done I have not found anything, but is there a way to conditionally map through an array of objects. For instance, I have an array of objects for doctors appointments and I am only wanting to map through the doctors appointments where the date has not past.

I normally do this, but this is not adding in any conditions.

{doctorsApptData.map(apptData => (
   <div>This date is valid! {apptData.date}</div>
))}

I have tried something like this, but no luck

{doctorsApptData.map(apptData => (
apptData.date >= DateTime.now() && (
   <div>This date is valid! {apptData.date}</div>
)))}

Thanks!

>Solution :

You can use filter method before map. This method creates a new array with only the elements that meet a certain condition.

For example:

{
  doctorsApptData
    .filter((apptData) => apptData.date >= DateTime.now())
    .map((apptData) => <div>This date is valid! {apptData.date}</div>);
}