Learning React / Part 3: states

This part introduces the state concept. With state, we can update the UI and handle events.

Handling events

We can handle events with JS as usual:

const App = () => {
  const clickHandler = () => { console.log('click') };
  return (<button onClick={clickHandler}>Click Button</button>)
}

State

React load all the components starting in the index.js and following all the children until the last one. This only happens the first time that the page is reached.

To be able to react to events and refresh some components in the browser we need to work with ‘state’. To enable ‘state’ we need to import ‘useState’ from React. ‘useState’ is a hook and all of the hooks in react start with ‘use’.

When you use states and one state change React understand that the component in which the state has been changed should be re-evaluated.

import React, { useState } from 'react';
const Element = (props) => {
  // title store the initial value 
  // setTitle is a function to change this value  
  const [title, setTitle] = useState(props.title);
  const clickHandler = () => { 
    // Calling to setTitle this whole class will be loaded again
    setTitle('updated!') 
  };
  
  return (
    <button onClick={clickHandler}>Click Button</button>
    <div>{title}</div>
  )
}

Important things about the code above:

• We use useState inside the function. If we repeat this component across our application the state will be different for each one and we will get the behaviour that we expected.
• We never assign a value directly to the variable title. In fact, we define title and setTitle as a constant. With ‘useState’ we delegate in React the title and we modify the value with the function ‘setTitle’.

We can have more than one state in the same file. Each one will have its own value and setter. One example of this behaviour is this form with three different states for title, amount and date:

The same example as above but unifying all the different states in only one using an object can be done. In this case, is important to take into account that React schedule each update of state. It’s recommended to use the prevState variable that works as a snapshot of the previous state and is the safer way. If your update state depends on the previous state you must use it. Anyway is more common to work with different variables as in the example stated above. Here is an example with an object:

We are going to introduce with the same example integrated with more components some concepts of React.

• Form submit: To submit the form an onClick event is added to the button. In the function, ‘submitHandler’, will be processed and sent the data.
• Two-way binding: This term is about the bidirectional connection between children and parents. For example, the connection between NewExpense and ExpenseForm through the props.
• Lifting the state up: props can only be passed from parent to child. If you need to return some value to another component you need to go up in the hierarchy and pass this value through the nearest parent between both components. For example, App is the parent for NewExpense and Expenses. To send a value from New Expense to Expenses we need to pass before through App and forwarded to Expenses.
• Stateless vs stateful components: These terms refer to the components that do not implement ‘useState’ and the components which do it.

— — —
Next chapter: https://medium.com/@antoniopr.apr/learning-react-part-3-states-a07f007ebfc8
Repo: https://github.com/antprt/learning-react