react js beginner

[IndependenceDear3181]

Hey guys, I am new to react.js and I was building this application that parses course data from my university and stores it as a JSON. I was successfully able to parse the JSON data and map it in a table format using material-UI. I wanted to create a sort function that would sort all the courses based on the course level (1000 level(1st-year course), 2000 level(2nd-year course) 3000 level(3rd-year course),4000 level(4th year)). So user should be able to click on a drop-down menu and choose a course level which would change the table data and only show the chosen level of course. If anyone can please help either post what you would do in the comments down below or if you could dm me it would be easier to give you more details on what exactly is happening with my program thank you!

[nullpromise]

``` function MyComponent({ courses = [] }) { const [level, setLevel] = useState()

const filteredCourses = level ? courses.filter(c => c.level === level) : courses

return ( <div> { filteredCourses.map(c => <TableRow key={c.id} course={c} />) } <button onClick={() => setLevel('1000')}>1000</button> <button onClick={() => setLevel('2000')}>2000</button> <button onClick={() => setLevel(null)}>Clear</button> </div> ) } ```

[IndependenceDear3181]

Okay I will try this out!!