React

HTML

<div id="app"></div>

<!-- Desired output:
Class: Blue
Quincy
Jason

Class: Red
Alexis
Sam

Class: Yellow
Katie -->

React

const Example = () => {

  const students = [
    { name: 'Tom', class: "Blue" },
    { name: 'Pom', class: "Blue" },
    { name: 'Max', class: "Red" },
    { name: 'Alex', class: "Red" },
    { name: 'John', class: "Yellow" }
  ];

  const res = students.filter(a => a.class === "Blue")
  return (
   <div>

     {students.map(student => (
       <div>
         <p>{student.class === "Blue" && student.name}</p>
         <p>{student.class === "Red" && student.name}</p>
       </div>
     ))}
   
   </div>
  )
  
}

ReactDOM.render(<Example />, document.querySelector("#app"))