2^nd Practical Class:
React State Operations

• immutable array methods
• immutable operations with objects and arrays
• custom hooks

Immutable Array Methods

Such methods produce a new array and do not mutate the existing one.

• transforms array items into a new array

• filters out some items from an array based on a condition

JavaScript Spread Operator

Combine multiple objects or arrays together.

Spread is when is on the right side of operator.

Spread for Objects

Spread for Arrays

JavaScript Rest Operator

Get the remainder of object properties or array elements after getting specific elements.

Rest is when is on the left side of operator.

Rest for Objects

Rest for Arrays

Custom Hooks in React

It is possible to extract some stateful logic into a separate hook (a function whose name begins with ).

Advantages

• encapsulation of logic
• better separation of concerns
• reusability
• clear API

To-do List

There is a sample to-do list page:

It uses a custom hook which exposes the array and several actions for manipulating the list of items.

What will be done at the class:

1. convert 'add item' input & button into a form which can be submitted
   • store the current input value using
   • bind the input value to the state using and props
   • call in the form's event callback
   • use to prevent reloading the page on form submit
2. implement
   • store current to-do list items using
   • use a single object state containing array and
3. clear input value on submit
4. implement
   • use to update the property in one of the items in the list based on its

• Final state: practical-02-end

Useful Links

• Updating Objects in State
• Updating Arrays in State