Learn React Hooks

Function component with Hook

The function component makes use of the useState Hook instead, so we do not need to deal with this or a constructor method. The full function component code looks as follows:

import React, { useState } from 'react'function MyName () {    const [ name, setName ] = useState('')    function handleChange (evt) {        setName(evt.target.value)    }        return (        <div>            <h1>My name is: {name}</h1>            <input type="text" value={name} onChange={handleChange} />        </div>    )}export default MyName

As we can see, Hooks make our code much more concise and easier to reason about. We do not need to worry about how things work internally anymore; we can simply use state, by accessing the useState function!