score:0
The Idea is to do something like this. Create a helper function to restructure the data into a multidimensional array by grouping them so that each array in the multidimensional array holds records about courses with the same id. then loop through the multidimensional array and perform whatever logic you want to.
let courses=[{id:1, SUBJECT: "ACC", NO:121,DESCR: 'class description1'},
{id:2, SUBJECT:"ACC", NO:121, DESCR:'class description2'},
...]
//Where ever we want to print the first group we just need to call the CourseList with a single input from the multidimentional structured array asonst
CourseList=(courses, onCourseSelect)=>{
//create another variable to hold the structured data
//this ensures that each key in the array is it self another array holding all the courses with that same id.
let structuredData = new Array();
courses.map(course => structuredData[course.id] = (courses.filter(co =>(co.id == course.id ))))
<div className="List ui relaxed divided list">
structuredData.map((data, k) => {
//each iteration over data is printing for a single group
console.log("Group", k)
data.map(course=>
<CourseItem key={course.id} descr={course.DESCR} onCourseSelect={onCourseSelect} />
)
})
</div>
}
Source: stackoverflow.com
Related Query
- Group Json data based on a field after converting it from csv to json in react
- Group by Data Field
- Cache data may be lost when replacing the my field of a Query object
- react input field will loose focus when filtering data
- How to Pass input Field Data from Modal to the Container in react-Native?
- Returning data from apollo-server based on a filter for a nested field
- How to group columns in React Data Grid?
- How to retrieve a referenced field data inside inputComponent in Sanity.io?
- How can I make my input field prefilled with data and editable on page load?
- Why Editor field not rendering recent data in react-hook-form
- How do I create an array of unique field values in React with data from Firestore?
- Mapping data object with a type field to specific React Components with TypeScript
- Unable to change the values of the mapping data in text field
- Input field (using downshift) is clearing the entered data when click on div other than submit and input field
- KeyPress to detect 'Enter' blocks any data entry on an Input text field
- Input an array of data in one input field
- Storing data locally for an autocomplete/typeahead field
- How to display data to input field after fetching data in reactjs
- How to compare each elements in an Array and group the ones that have same data (in my case date) ? JavaScript
- How can I restructure the data where it would group the same IDs?
- How can I display only the data where the field is true
- Passing Parameters to a function on an onChange Event along with field data
- Pass data from input field into variable without submitting
- want to group mongoDB documents by user. but after grouping, I don't want the user's mail field to appear again in the addresses. how?
- Using props data for a select field
- How to access field data in other field
- Sum field value in React from JSON API data
- Change value of field in reactjs component's state (with data obtained from firebase)
- React input field mirrors the data from previous input
- I need to set Fields to initial state after data added in table field onClick
More Query from same tag
- Find custom point coordinates with Forge
- Irritating API bug in react, cannot figure it out
- Blur Material UI Select component on the onChange event
- redux devtools chrome extensions - No store found
- React js pass a function this.state context
- TypeScript Theme Switch types erros
- Element type is invalid: expected a string (for built-in components) when using react-bootstrap
- React function not defined
- React.js, print something after all getDownloadURL functions completes
- React search (filter) function, add parameter to search
- Is there a way to get all data from a firestore database using useCollectionData()?
- If the props for a child component are unchanged, does React still re-render it?
- Cant pass array of objects to setPeople function in React
- How to fit one div into another div of a modal
- why clearinterval() is not working inside useEffect with empty dependency
- styled-system props typing with TypeScript
- Having an issue with e.target.value returning Undefined in React
- ES6: constructor can't declare as arrow function?
- How remove margin-bottom from flex-direction column?
- Object in array is undefined when I try to display it
- How to get access to a specific reducer variables as props from react without using routes
- What is the preferred way to test if function was called only once?
- _this3 not a function (React)
- Loading result of a useState Array
- Cannot read property React function component issue
- How to Delete individual items from list in react
- Element implicitly has an 'any' type because expression of type 'any' can't be used to index type with createStyles
- How do I disable Submit button in Amplify Default Auth UI?
- React Router renders two components instead of one
- Why does my onClick handler not log out the latest version of state and how can I troubleshoot this?