Recursive lists in React using Context

Photo by Markus Spiske temporausch.com from Pexels

Recently I have been working a lot with recursive trees, and displaying them in React. While working with them I came up with a pattern that I like, and that I want to share with those that run into this pattern. They can overcome this hurdle in a way that can be re-used quite easily.

To start, you want to create a context that has all of the functionality each node in your recursive tree might need. Lets for the sake of this article assume we are creating a nested keyword structure that we can use to tag stuff (pictures, tweets, posts, etc…) with. Nested meaning that keywords that have children that are selected, makes themselves selected (dog -> retriever, selecting retriever, also tags it with dog). Great. The context now has functions for selecting, and deselecting keywords.

Now, you create a keyword component that consumes the context and displays something, maybe what I would call a row. The only requirements I would make here, is that you should have the component accept a callback that returns a function to retrieve data (in this case, the next page of data). You pass this component as a render method to the precursor.

In general your structure would look something like this:

This assumes some things.

  1. You have to pass a function (or a react hook) to the Recurser component so that it can get children given the parent’s id. A function can work, but a dynamic hook can let you connect to redux, or consume a react context.
  2. The context provider holds the state for knowing what an item is tagged with, and provides functions for (in the case of keywords) changing that state.
  3. The context consumer and render component connects to the context provider and probably another context or redux state. This would allow the render component to get (again for keywords) the keyword’s name given the id. In the case of more complex objects, you could retrieve all properties of that object given an id.

This allows you to have different recursive lists, but keep the way they are nested and loaded. This could be good for a component in a keyword setup page, to set up possible keyword structures, and a second keyword component for tagging items with keywords. The rendered components can have totally separate functionality and layout but keep the recursion.

Check out a codepen example here: https://codesandbox.io/s/compassionate-tharp-dy79p

Note: The codepen is a pretty big example, but I tried to replicate the fact that in redux you get data with selectors, and you don’t get the promise (or observable, or callback or whatever) in the component itself. It uses a custom hook in the index file that has comment explanations.

--

--

--

Senior Fullstack Engineer at Route www.linkedin.com/in/blakewight/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Visualizing time series data in Vue.js

Vue.js and AWS AppSync, part one

Rapid-Fire CSS Transforms in JavaScript

Making MongoDB realtime using pusher

My Summer Internship @ Gigworks

How to upload file on Cypress.io?

Matrix AI Network Utils – Part 2.1: Sending a MAN transaction(JS, NodeJS), Intermediate level

Cross-Domain React Apps with Create-React-App and Zoid

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
Blake Wight

Blake Wight

Senior Fullstack Engineer at Route www.linkedin.com/in/blakewight/

More from Medium

React Introduction for beginners

React JS — Introduction

Ultimate guide on how to effectively learn React!

About React Hooks