React pamata saraksta komponents / mapping – filtering

Instrukcijas un uzdevums

Restorāns nolēmis no savas ēdienkartes izņemt visus desertus ar augstu kaloriju daudzumu.

Šajā praktiskajā darbā jūs gatavojaties ieviest jaunu saraksta komponentu DessertsList, kurā tiks parādīts tikai tie deserti, kuriem ir mazāk nekā 500 kalorijas, kas sakārtoti pēc kalorijām — no mazākā uz lieāko.

Dati, ar kuriem jums jāstrādā, ir nodrošināti failā App.js kā objektu masīvs. Katrs objekts apzīmē desertu, un tam ir šādas īpašības: nosaukums, kalorijas un izveidošanas datums izveidots.

import "./App.css";
import DessertsList from "./DessertsList";


const desserts = [
  {
    nosaukums: "Šokolādes Kūka",
    kalorijas: 400,
    izveidots: "2023-09-01",
  },
  {
    nosaukums: "Saldējums",
    kalorijas: 200,
    izveidots: "2023-01-02",
  },
  {
    nosaukums: "Tiramisu",
    kalorijas: 300,
    izveidots: "2023-10-03",
  },
  {
    nosaukums: "Sierakūka",
    kalorijas: 600,
    izveidots: "2023-01-04",
  },
];


function App() {
  return (
    <div className="App">
      <h2>Deserti ar zemu kaloriju saturu:</h2>
      <DessertsList data={desserts} />
    </div>
  );
}


export default App;

Lietotnes komponents nodod šo informāciju komponentam DessertsList kā rekvizītus ar minēto nosaukumu.

Katram saraksta vienumam ir jānorāda deserta nosaukums un kaloriju skaits, atdalot tos ar domuzīmi, t.i., piemēram: šokolādes putas – 250 cal.

Risinājuma skaidrojums:

Desertu sarakstam ir jāpiemēro trīs veidu darbības: filtrēšana, šķirošana un kartēšana. ( filtering, sorting, mapping. )

Lai gan darbību secība nav tik svarīga, ir ieteicams atstāt galīgo projekciju (kartēšanu) uz beigām, jo šī galīgā projekcija var izlaist dažus datus, kas nepieciešami filtrēšanas un kārtošanas kritērijiem.

Filtrēšana

Pirmā prasība ir uzrādīt desertus, kuros ir mazāk par 500 kalorijām. Tas nozīmē, ka siera kūka, kurā ir 600 kalorijas, ir jāizlaiž. Ja jums ir jāizslēdz elementi no sarakstiem, pamatojoties uz noteiktu nosacījumu vai nosacījumu kopu, jums ir jāizmanto filter() metode.

Filtra metode izveido masīva kopiju, kas filtrēta līdz tikai tiem elementiem no sākotnējā masīva, kas iztur pārbaudi. Vārdu sakot, tas atgriezīs jaunu sarakstu, kurā būs tikai tie elementi, kas atbilst nosacījumam.

Katram desertam no saraksta ir īpašība, ko sauc par kalorijām, kas ir vesels skaitlis, kas apzīmē kaloriju skaitu. Tāpēc izpildāmajam nosacījumam jābūt šādam:

const lowCaloriesDesserts = props.data 
 .filter((dessert) => { 
   return dessert.calories < 500; 
 }) 

Jūs varat veikt ķēdītē vienu operāciju pēc otras. Atceraties, ka filtrs atgriež jauno masīvu ar filtrētajiem elementiem, tāpēc kārtošanu var sasaistīt uzreiz pēc tam, kā norādīts tālāk:

const lowCaloriesDesserts = props.data 
 .filter((dessert) => { 
   return dessert.calories < 500; 
 }) 
 .sort((a, b) => { 
   return a.calories - b.calories; 
 }) 

function DessertsList(props) {
    const { data } = props;
    const filteredDesserts = data
      .filter((dessert) => dessert.kalorijas <= 500)
      .sort((a, b) => a.kalorijas - b.kalorijas);
 
    return (
      <ul>
        {filteredDesserts.map((dessert) => (
          <li key={dessert.nosaukums}>
            {dessert.nosaukums} - {dessert.kalorijas} cal.
          </li>
        ))}
      </ul>
    );
  }
 
  export default DessertsList;

.App {
  font-family: sans-serif;
  text-align: center;
}


ul {
  list-style: none;
  padding: 0;
}


li {
  background-color: #f4f4f4;
  margin: 5px;
  padding: 10px;
}


h2 {
  color: #333;
}