JS & TS Fundamentals
JavaScript API
TypeScript Deep Dive
Work with Generics
# Example #1: Spread operator in React
In this example we have a state that contains an object so structured:
{ id: 1, name: 'Fabio', web: 'fabiobiondi.dev' }At the click of the button we want to update only the property
name but if we used the setUser function in this way we would lose all other properties (id and web):
What we will do is the following:
- Use the
useStatefunction, which provides us with the previous state—the complete object containing all properties. - Return a new state that combines the previous state with the updated
nameproperty. We will use the object spread operator to merge them.
Here is the working example:
App.tsx
# Example #2: Input and events
This example is very similar to the previous one except that the
name property will be determined and updated by the content of an input field:App.tsx
-
State Initialization: The state is initialized with the useState hook, setting the initial user object to:
{ id: 1, name: 'Fabio' }. -
State Update Function: The
setUserfunction is used to update the state. In theonChangeNamefunction,setUseris called with a function that takes the previous state and returns a new state object. -
State Update Logic: The previous state is spread
(...previousState), and only thenameproperty is updated with the new value from the input.
The ChangeEvent Type
In the previous snippet the event parameter is typed as
e: ChangeEvent<HTMLInputElement>.This type is provided by React and serves to type the
event property returned from the listener to the change event.
This way we are communicating to the TypeScript compiler that the property e is an event of type ChangeEvent and that its currentTarget property (that is the input reference) will contain a HTMLInputElement.
