transforming lists in javascript

When using the map() method, you will need to define a new variable, as it always returns a new array.

render simple list component

JSX → syntax extension to JS react uses to describe UI

component → function returning JSX

When a JSX transformation will be part of the render method of components, you need to use curly braces to wrap your dynamic data so it can be accessed.

Lab

DessertsList.js

function DessertsList(props) {
  const listItems = props.data
    .filter(dessert => dessert.calories <= 500)
    .sort((a, b) => a.calories - b.calories)
    .map(dessert => (
      <li key={dessert.name}>
        {dessert.name} - {dessert.calories} cal
      </li>
    ));

  return (
    <ul>
      {listItems}
    </ul>
  );
}

export default DessertsList;

App.js

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

const desserts = [
  {
    name: "Chocolate Cake",
    calories: 400,
    createdAt: "2022-09-01",
  },
  {
    name: "Ice Cream",
    calories: 200,
    createdAt: "2022-01-02",
  },
  {
    name: "Tiramisu",
    calories: 300,
    createdAt: "2021-10-03",
  },
  {
    name: "Cheesecake",
    calories: 600,
    createdAt: "2022-01-04",
  },
];

function App() {
  return (
    <div className="App">
      <h2>List of low calorie desserts:</h2>
      <DessertsList data={desserts} />
    </div>
  );
}

export default App;