➡️ So you want to use context (https://reactjs.org/docs/context.html) 🙌
➡️ So you want your context to provide state and a function to update the state.
➡️ So you want to use Typescript.

Try this:

import { createContext } from "react";const Context = createContext({
state: [] as string[],
dispatch: (state: string) => {},

🤫 Assumes that stateis a string Array.

Maybe this is obvious, but it took me a while to type the defaultValue passed to createContext.

The cast for state: [] as string[] is interesting. If you don’t cast, Typescript will complain when you pass state to context’s…

Photo by Steve Tsang on Unsplash

Recently I read an article about how to “get rid of if / else statements with OOP”.

Oh, I thought, probably there’s a map / associative array to match an input to an output instead of a switch or nested ifs. Cool! Let’s check it out. Wonder what the OOP bit is…

Of course, our old friend polymorphism. Turns out the advice was to write a big if / else and return a different class for each condition. The classes extend the same parent so can be consumed by the caller with the magic of polymorphism. …

JavaScript frameworks dominate the front-end web technology conversation. But do they really make it easier to build web applications?

There is an incredibly low barrier to creating a web page. With just a text editor, pictures, words and buttons can be summoned with little effort. This is a wonderful experience and has undoubtedly drawn many to the art. But attempt to create anything sophisticated, even just adding responsive behaviour, and suddenly a simple endeavour becomes exponentially difficult to understand and modify.

This is a familiar problem in programming and often solved with encapsulation. Build components — behavioural or visual elements…

Gabriel McCallin

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