useState example

Select your favorite fruit:

...

useState

Adds state variable in functional components, without writing a class.

const [fruit, setFruit] = useState(null);

Current state:

// current state:
  fruit = {
    name: undefined
    emoji: undefined
  }

Example of setting the state:

// ...
<p>Select your favorite fruit:</p>
  <div>
    {fruits.map((fruit) => (
      <button onClick={() => { setFruit(fruit) }}>
        <span>{fruit.emoji}</span>
      </button>
    ))}
  </div>

<p> Great! <span>{fruit.name} {fruit.emoji}!</span></p>