1import React, { Component } from "react";
2
3export default class CreateUsername extends Component {
4  constructor(props) {
5    super(props);
6    this.state = {
7      userName: "",
8    };
9    this.handleInputChange = this.handleInputChange.bind(this);
10  }
11
12  handleInputChange(e) {
13    this.setState({
14      userName: e.target.value
15    });
16  }
17
18  render() {
19    return (
20      <input 
21        type="text"
22        onChange={this.handleInputChange} 
23        value={this.state.userName} 
24      />
25    );
26  }
27}

I’m explicitly importing Component from the React library by name, but you can also just use it without explicitly importing it by adding the Component property onto the main React import like React.Component

1import React, { Component } from "react";
2
3export default class CreateUsername extends Component {
4  state = {
5    userName: ""
6  };
7
8  handleInputChange = (e) => {
9    this.setState({
10      userName: e.target.value
11    });
12  };
13
14  render() {
15    return (
16      <input
17        type="text"
18        onChange={this.handleInputChange}
19        value={this.state.userName}
20      />
21    );
22  }
23}

1handleInputChange = (e) => {
2  this.setState({
3    userName: e.target.value
4  });
5};

1this.state = {
2  userName: ‘Jason’
3}

1this.setState((previousState) => {
2  return {
3    count: ++previousState.count 
4  }
5});

1this.setState({
2	stateValue: ‘updated’
3}, this.optionalCallback());

1import React, { useState } from ‘react’;

Similarly to the Component property of React, instead of explicitly importing useState by name you could also just use React.useState

1// functional component
2const [valueA, setValueA] = useState(‘’);
3const [valueB, setValueB] = useState({});
4
5// class component
6this.state = {
7  valueA: ‘’,
8  valueB: {}
9}

Regardless of if you use a class component or a functional component you can track as many state variables as you want, but you should generally try to limit the amount for each component so you can keep your components smaller so that they’re easier to reason about, test, and reuse.

1import React, { useState } from "react";
2
3export default function CreateUsername() {
4  const [userName, setUserName] = useState("");
5  
6  const handleInputChange = (e) => {
7    setUserName(e.target.value);
8  }
9
10  return (
11    <input 
12      type="text"
13      onChange={handleInputChange} 
14      value={userName}
15    />
16  );
17}

• there’s no longer any constructor function
• instead of a generic state object that holds the userName state value as a property you just declare the userName state value directly as its own variable
• instead of defining the handleInputChange method with just the name of the method we declare it as an arrow function expression, although you can also define it as a function declaration like function handleInputChange(e) {…}
• since we’re no longer working with classes there are no references to the this keyword
• there’s no longer any render function

1// class component
2this.state = {
3	a: ‘initial a’,
4	b: ‘initial b’
5}
6
7this.setState({
8	a: ‘updated a’
9});
10
11console.log(this.state); // {a: ‘updated a’, b: ‘initial b’}
12// React merges the new `a` value into the
13// existing state and leaves `b` alone
14
15
16// functional component
17const [myState, setMyState] = useState({
18	a: ‘initial a’,
19	b: ‘initial b’
20});
21
22setMyState({a: ‘updated a’});
23console.log(myState); // {a: ‘updated a’}
24// React doesn’t merge the objects so 
25// we lose the `b` property

1setMyObject((previousObj) => {…previousObj, a: ‘updated value’});
2
3setMyArray((previousArr) => […previousArr, ‘updated value’];

1import React, { useState, useEffect } from 'react';
2
3function UserLogin(props) {
4	const [isLoggedIn, setIsLoggedIn] = useState(false);
5	useEffect(() => {
6		if (isLoggedIn === true) {
7		  renderUserDashboard();
8    }  else {
9	    renderLoginForm();
10    }
11  }, [isLoggedIn]);
12}