Day 13 of 100days of code

Deleting items from the list .

First step:

First, I will create a function in the App component called handleDeleteItems to handle the deletion of items. Thereafter, I will pass this function as a prop to the PackingList component as onDelete, with the function designed to accept an "id" as a parameter.👇👇

To explain better:

• const handleDeleteItems = (id) => {: This line declares a function named handleDeleteItems that takes an id as a parameter.

• setItems((items) => ...);: This line uses the setItems function, likely obtained from the useState hook, to update the state of the items in the component.

• items.filter((item) =>item.id!== id): The filter method is used to create a new array containing only the items that do not have the specified id. The item.id!== id condition ensures that only items with different id values are included in the new array.

• The entire items.filter(...) expression ensures that items with the specified id are removed from the array, and the new array is then set as the updated state using setItems.

In summary, when handleDeleteItems is called with an id, it updates the items state by creating a new array that excludes the item with the specified id. This effectively removes the item from the list.

Second step:

In the PackingList component, I will destructure the props. Since the Item component requires these props, I will pass them down to the Item component and destructure them there as well. I will use the onClick event handler on the "❌" button, calling the onDelete function with the item id as a parameter. 👇👇

The item.id is passed as an argument to the onDelete function to identify which item should be deleted or removed. The "❌" symbol is just the visual representation inside the button, commonly used to indicate a delete action in user interfaces.👆👆👆👆

Updating item as packed or unpacked.

First Step:

I updated the newItem array within the FormComponent. It was a minor modification, just an addition around line 18.👇👇

second step:

Create a function named handleToggleItem👇👇

To explain better:

• const handleToggleItem = (id) => {: This line declares a function named handleToggleItem that takes an id as a parameter.

• setItems((items) => ...);: This line uses the setItems function, which is likely a state updater function obtained from the useState hook. It's responsible for updating the state of the items in the component.

• items.map((item) => ...);: The map function is used to create a new array by iterating over each item in the current items array.

• item.id=== id ? { ...item, packed: !item.packed } : item: This line checks if the id of the current item matches the provided id. If it does, it creates a new object (using the spread operator ...) with the same properties as the current item (...item), but it toggles the value of the packed property by using !item.packed. If the id doesn't match, it returns the current item unchanged.

• The entire items.map(...) expression ensures that the modification is applied to the specific item with the matching id, and the new array is returned.

Third step: Destructure the handleToggleItem function received as the onToggle prop in the PackingList component. Additionally, pass it as props to its child component, which is the Item component in this case.

Fourth step: I will create a checkbox before the span for each item. The text's appearance is styled based on whether the item is marked as "packed" or not, and the checkbox triggers the onToggle function when its state changes.

To explain better:

• value={item.packed}: The value attribute is set to the packed property of the item. This likely determines whether the checkbox is checked or unchecked based on the packed property of the item.

• onChange={() => onToggle(item.id)}: This is the onChange event handler for the checkbox. It calls the onToggle function when the checkbox state changes, passing item.id as an argument. The onToggle function is responsible for handling the toggling of the "packed" property for the corresponding item.

• <span style={item.packed ? { textDecoration: "line-through" } : {}}>:

  • This is a span element that wraps around the text content.

  • style={item.packed ? { textDecoration: "line-through" } : {}}: The style attribute is conditionally applied based on the value of item.packed. If item.packed is true, the text decoration is set to "line-through" (which typically strikes through the text). If item.packed is false or undefined, an empty style object is applied, meaning no text decoration.

Derived state.

In React, derived state involves calculating or deducing state values from the current state or props of a component, rather than assigning them directly within the component. Instead of storing these derived values in the component's state, they are dynamically generated based on the existing state or props when necessary.

Utilizing derived state is advantageous when there is a need to compute or transform data based on other elements of state or props, eliminating the need to store these intermediary values explicitly in the component's state. This approach promotes cleaner and more maintainable code and prevents unnecessary re-rendering.

Tomorrow, I'll demonstrate a practical example of this while updating the stats component.