Posts

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
Recent posts