Text inputs are the bread and butter of forms, but they’re often tricky to get right. In React, splitting commonly used elements out into components is an efficient way to maximise your re-use of code and minimise errors. Since text inputs are used for a wide variety of purposes, we’ll need to make the component flexible enough to handle a range of different variables in suitability for different environments. Our text input will:


React’s new context API is pretty neat; it allows us to leverage the power of a single state object across an entire app, removing the need for passing props down through multiple components and reducing the risk along the way. All this without touching Redux. Since it’s a new feature the documentation is still pretty green, so I’ve summarised the essentials here in a quick read.

First, install the latest react and react-dom packages by running $ yarn add react@latest react-dom@latest.

Initialise your context by using the createContext method available from the react package:

import { createContext } from 'react';

Will Howard

Full-stack developer based in London. https://willhoward.co.uk

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store