Skip to content

Latest commit

 

History

History
80 lines (63 loc) · 3.47 KB

12-react-manage-state-in-a-react-component-with-the-usestate-hook.md

File metadata and controls

80 lines (63 loc) · 3.47 KB
Raw

12. Manage state in a React Component with the useState hook

📹 Video

💻 CodeSandbox

Notes

  • An application that responds to user input is valuable, but what do we do with that data the user has given us? This is where the component state comes in.
  • We need a place to put data that can change in our application, and we need to let React know when that state changes so it can update (or re-render) our app for us.
  • In React, the state is associated with components and when the state changes, the component is updated.
  • To get access to this state and to update it, we use what is called a React Hook which allows us to call into React from within our component and let it know that we need to manage some state.
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <script type="text/babel">
    function Greeting() {
      // useState - Returns a stateful value, and a function to update it.
      // During the initial render, the returned state (state) is the same
      // as the value passed as the first argument (initialState).
      const [name, setName] = React.useState('');
      // The setState function is used to update the state.
      // It accepts a new state value and enqueues a re-render of the component.
      // During subsequent re-renders, the first value returned by useState
      // will always be the most recent state after applying updates.

      const handleChange = event => setName(event.target.value);
      return (
        <div>
          <form>
            {/* htmlFor is the same thing as For attribute in HTML */}
            <label htmlFor="name">Name: </label>
            <input onChange={handleChange} id="name" />
          </form>
          {name ? <strong>Hello {name}</strong> : 'Please type your name'}
        </div>
      );
    }

    ReactDOM.render(<Greeting />, document.getElementById('root'));
  </script>
</body>
  • In React, states are managed independently from each other. For example:
const [name, setName] = React.useState('');
const [name2, setName2] = React.useState('');

const handleChange = event => setName(event.target.value);
const handleChange2 = event => setName(event.target.value);
// ...

<form>
  <label htmlFor="name">Name: </label>
  <input onChange={handleChange} id="name" />
</form>;

<form>
  <label htmlFor="name">Name: </label>
  <input onChange={handleChange2} id="name" />
</form>;

// ...
  • The state can be any type you want – you can useState with an array, useState an object, a number, a boolean, a string, whatever you need.

Additional resource