React Handbook

Computed/Memoized variables
- useMemo example
- useMemo and form filtering

Context
- useContext & createContext

Refs
- Focus an input programatically

User events

Form handling

Tables
- Table with data
- Table with data & filter

Custom hooks

Navigation components
- Opening menu
- Tabs

​x
 
function App () {
  const handleClick = (event) => {
    console.log('Mouse click event', event)
  }
  
  const handleChange = (event) => {
    console.log('Input change event', event)
    console.log('and value', event.target.value)
  }
  
  return (
    <form>
      <input
        onChange={handleChange}
        placeholder="Say something.."
      />
      <input
        // get the event object as a parameter
        onChange={(event) => handleChange(event)}
        placeholder="Say something else.."
      />
      <button onClick={handleClick} type="button">
        Click me
      </button>
    </form>
  )
}
​

The onChange and onClick handlers on an HTML element provide us with an event object as the default first parameter, from which we can retrieve the current value.