score:1
you can achieve that by first re-shaping the data using the reduce function, to group your notes by date. the following snippet demonstrates a possible implementation:
const groupbydate = (notesdata) => {
return notesdata.reduce((groups, note) => {
const date = new date(note.timestamp).todatestring()
if (!groups.hasownproperty(date)) {
groups[date] = []
}
groups[date].push(note)
return groups
}, {})
}
const testdata = [
{
timestamp: "2022-04-12t19:25:39.950747+00:00",
name : "note 1"
},
{
timestamp: "2022-04-12t19:25:39.950747+00:00",
name : "note 2"
}, {
timestamp: "2022-05-12t19:25:39.950747+00:00",
name : "note 3"
}, {
timestamp: "2022-05-12t19:25:39.950747+00:00",
name : "note 4"
}
]
console.log(groupbydate(testdata))
then you can render on notedate
for each key of the resulting object, and a notecard
for each note.
keep in mind that this is an expensive operations, an you might need to memoize it with usememo to avoid recomputing the grouped date with each render.
finally if you have access to the api code from which your getting the information, the correct way to handle this would probably be to do it server-side. grouping the notes by date would be way more performant if it was done by postgresql !
Source: stackoverflow.com
Related Query
- React: Separate array of timestamps into days
- How to get separate daily array from the weather API array (For React Redux) which gives a 5 days every 3 hours report
- Moving React classes into separate files
- How to access Object array file into react component?
- Insert object into array at specific index in React
- Should you pass setter functions into the dependency array of a React hook?
- is it possible to separate var styles = StyleSheet.create from React.component into different script in react native?
- React Formik checkbox group does not turn into an array of invidual checked or unchecked elements
- React Components from Separate App not integrating into Main App
- React / Typescript : pushing obj into array of object and undefined type
- Why does react render an array of strings into an HTML element?
- How to Separate Jsx inside render function into a separate file in ES6? or any other solution in react to separate the Logic and presentation?
- React Firestore data retrieval into array not working
- Convert array into array of React components separated by string
- Converting array data into a table in react
- React convert props Objects into array then setState
- React addons update - how to insert an object into an array of objects?
- Splitting React components into separate files
- How to put React code into a separate file?
- React - convert object into array of objects with properties
- How to add a each element of an array into React state
- Splitting up a Rails and React app into separate Docker containers?
- How to push an object into an array with React Hooks
- how should we convert string data into array and display into react table
- How to add items into specific Id using the react array map method
- how to map array of images into two images per list item React JS
- React multiple inputs onChange into a single array
- Can't concatenate json server data into array using useEffect hook in React
- Add value from input into array is not working in React
- React Redux putting Array into Store Only Updates on first Change
More Query from same tag
- Using multiple setHook makes component render more than once?
- siblings CSS rules with React styled-components / CSS modules / CSS-in-JS
- Running Javascript to load a certain component based on switch statement from within JSX
- way to embed if expressions inside JSX code?
- how to test redux-saga all effect using jest
- React PropType with ESLint
- How to share data between javascript files without database using import - export
- Proper way of submitting parameters to parents in react
- React Apollo GraphQL, many queries, but one component to be reused
- CSS checkerboard component ignoring border radius
- apollo's MockedProvider doesn't warn clearly about missing mocks
- Object updation inside loop with immutable state
- missing in props validation react/prop-types
- lodash isEmpty and has method vs simple check
- Gatsby - change over-the-fold initial HTML
- How to change the width of textarea when using TextArea tag
- Changing/shuffling text every 1.5 second in a react component
- How to change the url dinamically when redirecting on click? React
- Convert text to HTML
- Cannot read property x of undefined
- React Redux: redirect user (history.push()) when certain http status codes are received during async action (thunk)
- Manipulation the zoom property in CSS3
- react-bootstrap's navbar bug in Nextjs
- How To delete items Array in objects state in react
- How to properly dispatch an axios delete with react redux
- After react update useReducer hook requires 3 arguments
- Using Map Function with json Array (React)
- can't change background color in theme Material-UI
- How React virtual dom differ from to Ajax in functionality?
- How to change the numbers in steps of material-ui Stepper?