Dfyjkt

I have this array of js objects. How can I output this in jsx based on time key? Like in the example below.

 [
 
 articleName: "Burger",
 time: "11/8/2018, 2:43:30 PM"
 ,
 
 articleName: "Cheese",
 time: "11/8/2018, 2:43:30 PM"
 ,
 
 articleName: "Burger",
 time: "11/8/2018, 2:44:30 PM"
 ,
 
 articleName: "Cheese",
 time: "11/8/2018, 2:44:30 PM"
 ,
 
 articleName: "Burger",
 time: "11/8/2018, 2:45:30 PM"
 ,
 
 articleName: "Cheese",
 time: "11/8/2018, 2:45:30 PM"
 
 ]

Based on time:

from 2:43:30 PM
<View>
 <Text>Burger</Text>
 <Text>Cheese</Text>
</View>

from 2:44:30 PM
<View>
 <Text>Burger</Text>
 <Text>Cheese</Text>
</View>

from 2:45:30 PM
<View>
 <Text>Burger</Text>
 <Text>Cheese</Text>
</View>

One solution would be to reduce the your array into groups based on time, and then map those into JSX. Assuming your array is called data:

const dataByTime = data.reduce((acc, el) => 
 if (Array.isArray(acc[el.time])) 
 acc[el.time].push(el.articleName)
 else 
 acc[el.time] = [el.articleName]
 
 return acc
, )

dataByTime is now of the format [date time]: ['burger', 'cheese'], ...

So you could map that to JSX like this:

Object.keys(dataByTime).map((time) => (
 <div>
 time
 <View>
 
 dataByTime[time].map(food => (
 <Text>food</Text>
 ))
 
 </View>
 </div>
))

You could skip the map in the JSX and handle it in the original reducer too (instead of pushing el.articleName you could push <Text>el.articleName</Text>).