const listItems = items.map((item) =>
      item.id === id ? { ...item, checked: !item.checked } : item
    )

Especially what is the difference between item.id and id? and why use : item at the end?

Full code below, Note that the code isn't something I'm working on, it is a tutorial and there is still more to code

import React from "react";
import { useState } from "react";
import { FaTrashAlt } from "react-icons/fa";

const Content = () => {
  const [items, setItems] = useState([
    {
      id: 1,
      checked: false,
      item: "One half bag of cocoa covered",
    },
    {
      id: 2,
      checked: false,
      item: "Item 2",
    },
    {
      id: 3,
      checked: false,
      item: "Item 3",
    },
  ]);

  const handleCheck = (id) => {
    console.log(`key: ${id}`);
    const listItems = items.map((item) =>
      item.id === id ? { ...item, checked: !item.checked } : item
    );
    setItems(listItems);
    localStorage.setItem("shoppinglist", JSON.stringify(listItems));
  };

  return (
    <main>
      <main>
        <ul>
          {items.map((item) => (
            <li className="item" key={item.id}>
              <input
                type="checkbox"
                onChange={() => handleCheck(item.id)}
                checked={item.checked}
              />
              <label
                style={item.checked ? { color: "red" } : { color: "green" }}
                onClick={() => handleCheck(item.id)}
              >
                {item.item}
              </label>
              {/* <button>Delete</button> */}
              <FaTrashAlt
                onClick={() => handleCheck(item.id)}
                role="button"
                tabIndex="0"
              />
            </li>
          ))}
        </ul>
      </main>
    </main>
  );
};

export default Content;

CodePudding user response：

items.map(item => ) is mapping over an array of items, item is the object of the current item being mapped

id is the id that comes from handleCheck function(triggered onClick), which is the id of the clicked item, while item.id is the id of the current item from the array of objects

item.id === id ? { ...item, checked: !item.checked } : item uses the ternary operator which is a shorthand if/else to check if the id of the current item is the same as the id of the clicked item

if it is(true) it adds to the current item object checked: !item.checked, if it isn't(false) it returns the item object as it is

CodePudding user response：

Here this code trying to keep items array immutable,if you change item.checked value it without using It will modify items array too

{ ...item, checked: !item.checked }

And Id is used to collect only particular item and modifications of it.

CodePudding user response：

The map function iterates through all the items in a list. Each item has an id, which is the list.id variable. The function takes id as a param.

Then if item.id equals the passed in id, a modified item will be returned. If not, the iten is returned unmodified. That's what :item at the end is for.

CodePudding user response：

A few basics to start since I'm not sure where the confusion lies:

• map() takes the contents of a list and returns another list / array based on those concepts. e.g. [1,2,3].map(x => x *2) will return [ 2, 4, 6 ]

• The ternary ?: operator takes three args (hence the name) If the first is true, returns the second, otherwise the third e.g. true ? 'yes' : 'no' returns 'yes'

• The spread operator populates one object with the contents of another. e.g. If a = { foo: 'Hello' } then { ...a, bar: 'World' } means { foo: 'Hello', bar: 'World' }

So your example takes the first list and If the ID matches the checkbox ID being targetted, it returns a new object with the state flipped, otherwise it returns the original object.

The net effect is a list of IDs with the "checked" status flipped on one of the items. Make sense?