DEV Community

Hans Garcia
Hans Garcia

Posted on

Share states and functionalities with react context

In this post, we are going to learn how to use React Context to create and provide a state and functionalities to a group of components.

A Basic Radio Button Component

First, let's create a Component that we will call RadioButton, it will receive checked, value, onChange and children as a prop. We want to encapsulate the 'input' html tag into a react component to make it reusable.

import React from "react";

function RadioButton({ checked, value, onChange, children }){
  return (
    <label>
      <input
        type="radio"
        value={value}
        checked={checked}
        onChange={({ target }) => onChange(target.value)}
      />
      { children }
    </label>
  )
}
Enter fullscreen mode Exit fullscreen mode

This component works as a presentation component, this is not a thing officially, but many people like to give this name to components that do not have a local state and return jsx elements.

Now we can use this component to display a group of inputs of type="radio", for example of animals.

function Animals(){
  return (
    <div>
      <RadioButton>🐱</RadioButton>
      <RadioButton>🐶</RadioButton>
      <RadioButton>🐰</RadioButton>
      <RadioButton>🐵</RadioButton>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

alt text

To select one of a group of options we need a state to hold the current value selected.

For example, if the selected value is "cat", the state is "cat", if change to "monkey" the state will change to "monkey".

Handle the state of our component

Let's create a stateful component in which we want to know if the users prefer a cat or a dog as a pet.

I know, I know, this is a tough decision. 🤔

function Form() {
  const [pet, setPet] = React.useState("cat");

  function handleOnChange(value) {
    setPet(value);
  }

  return (
    <div>
      <RadioButton value="cat" checked={"cat" === pet} onChange={onChange}>
        <span role="img" aria-label="cat">
          🐱
        </span>
      </RadioButton>
      <RadioButton value="dog" checked={"dog" === pet} onChange={onChange}>
        <span role="img" aria-label="dog">
          🐶
        </span>
      </RadioButton>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

let's review what we did here.

First, we declared a stateful component called Form.

A stateful component is a component that can have one or more local states.

  • we use React.useState with an initial value "cat".
  • then declared a function handleOnChange that will update the state of the component.
  • and finally we pass the cat and dog emojis with their appropriated tags to the RadioButton component.
<RadioButton
  value="dog"
  checked={"dog" === pet}
  onChange={handleOnChange}>
  <span role="img" aria-label="dog">
    🐶
  </span>
</RadioButton>
Enter fullscreen mode Exit fullscreen mode

radio button

Using context to share states through components

The logic behind a radio button is simple, it allows an user to choose only one of a group of options, in this case, an user only must choose between 🐱 or 🐶.

We are going to use React Context to share the state through the Radio Button Components.

Let's create a context with React.createContext() and the return value will be assign to a const named RadioContext.

const RadioContext = React.createContext();
Enter fullscreen mode Exit fullscreen mode

We are going to change the name of the stateful component from Form to RadioGroup and now it will recieve three new props: defaultValue, onChange and children.

- function Form()
+ function RadioGroup({ children, defaultValue, onChange }){
  //...
}
Enter fullscreen mode Exit fullscreen mode

We'll rename the old pet and setPet variable names to more generic ones like state, setState and this state will remain as an empty string.

- const [pet, setPet] = React.useState("cat");
+ const [state, setState] = React.useState("");
Enter fullscreen mode Exit fullscreen mode

Now that we are receiving a new prop defaultValue we need to add it to the state every time it changes so we'll use React.useEffect.

React.useEffect(()=>{
    setState(defaultValue)
  }, [defaultValue])
Enter fullscreen mode Exit fullscreen mode

In the return statement, we will use RadioContext.Provider to allow other components to subscribe to the context changes, we will provide these values in value={[state, onChange]}

<RadioContext.Provider value={[state, onChange]}>
  <div role="radiogroup">
    {children}
  </div>
</RadioContext.Provider>
Enter fullscreen mode Exit fullscreen mode

Now let's move all of this to another file radioButton.js

// radioButton.js
import React from "react";
const RadioContext = React.createContext();

function RadioGroup({ children, defaultValue, onChange }) {
  const [state, setState] = React.useState("");

  function handleOnChange(value) {
    setState(value);
    onChange(value); // we can call the onChange prop and pass the new value
  }

  React.useEffect(() => {
    setState(defaultValue);
  }, [defaultValue]);

  return (
    <RadioContext.Provider value={[state, handleOnChange]}>
      <div role="radiogroup">{children}</div>
    </RadioContext.Provider>
  );
}
Enter fullscreen mode Exit fullscreen mode

Consuming changes of states from context.

Our components need a way to get the values provided by our context.
We are going to use React.useContext, we'll passed the RadioContext created before as an input React.useContext(RadioContext), this will return the values from the provider <RadioContext.Provider value={[state, onChange]}>

function useRadioContext(){
  // we could use array destructuring if we want
  // const [state, onChange] = React.useContext(RadioContext);
  const context = React.useContext(RadioContext);
  if (!context) {
    throw new Error(
      `Radio compound components cannot be rendered outside the Radio component`
    );
  }
  return context;
}
Enter fullscreen mode Exit fullscreen mode

Here we are only validating the RadioButton component is used inside the RadioGroup context component, if not it will throw an error.

Subscribe to changes

The Radio Button Component need to subscribe to changes in the RadioGroup Component.

function RadioButton({ value, children }) {
  const [state, onChange] = useRadioContext();
  const checked = value === state;
  return (
    <label>
      <input
        value={value}
        checked={checked}
        type="radio"
        onChange={({ target }) => onChange(target.value)}
      />
      {children}
    </label>
  );
}
Enter fullscreen mode Exit fullscreen mode

then we only need to know if the component is checked, by comparing the state (value) coming from the context and the value of the component.

let's see the code complete.

// radioButton.js
import React from "react";

const RadioContext = React.createContext();

function useRadioContext() {
  const context = React.useContext(RadioContext);
  if (!context) {
    throw new Error(
      `Radio compound components cannot be rendered outside the Radio component`
    );
  }
  return context;
}

function RadioGroup({ children, defaultValue, onChange }) {
  const [state, setState] = React.useState("");

  function handleOnChange(value) {
    setState(value);
    onChange(value);
  }

  React.useEffect(() => {
    setState(defaultValue);
  }, [defaultValue]);

  return (
    <RadioContext.Provider value={[state, handleOnChange]}>
      <div role="radiogroup">{children}</div>
    </RadioContext.Provider>
  );
}

function RadioButton({ value, children }) {
  const [state, onChange] = useRadioContext();
  const checked = value === state;
  return (
    <label>
      <input
        value={value}
        checked={checked}
        type="radio"
        onChange={({ target }) => onChange(target.value)}
      />
      {children}
    </label>
  );
}

RadioGroup.RadioButton = RadioButton;

export default RadioGroup;
Enter fullscreen mode Exit fullscreen mode

At the bottom of the file, we export the Radio component as a export default but before we added the RadioGroup component as a property of the Component.

Using our custom component

import React from "react";
import ReactDOM from "react-dom";
import RadioGroup from "./radioButton";

function App() {
  return (
    <RadioGroup
      defaultValue="cat"
      onChange={value => console.log("value: ", value)}
    >
      <RadioGroup.RadioButton value="cat">
        <span role="img" aria-label="cat">
          🐱
        </span>
      </RadioGroup.RadioButton>
      <RadioGroup.RadioButton value="dog">
        <span role="img" aria-label="dog">
          🐶
        </span>
      </RadioGroup.RadioButton>
    </RadioGroup>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Enter fullscreen mode Exit fullscreen mode

Now our new component works, may be it is a little verbose but I like it.

This is not a detail implementation but a started point to use React Context.

If you want to play a little bit with it, try on codesandbox

Top comments (0)