Renderig Lists, Conditional Rendering, Click Events, Onclick, React hook(useState()), OnChange, Updater function, Update objects in State and Update Arrays in State
Rendering Lists App.jsx import Lists from './Lists.jsx' function App (){ return ( < Lists /> ); } export default App Lists.jsx function Lists (){ const fruits = [ "apple" , "orange" , "Banana" , "Pineapple" ]; const listItems = fruits . map ( fruit => < li > { fruit } </ li > ); return ( < ul > { listItems } </ ul > ); } export default Lists Lists.jsx using sort, filter and map method function Lists (){ const fruits = [{ id: 1 , name: "apple" , calories: 95 }, { id: 2 , name: "orange" , calories: 85 }, { id: 3 , name: "Banana" , calories: 87 }, { id: 4 , name: "Pineapple" , calories: 97 }]; // fruits.sort((a, b)=> a.name.localeCompare(b.name)); // fruits.sort((a,b)=> a.calories - b.calories); const highcalories = fruits . filter (( fruit ) => fruit . calories > 87