React recursive component

GitHub link for the code below: https://github.com/prakash118/blog-code/tree/main/recursive-component/src

Tech-stack

• React
• Tailwind
• Zod

While refreshing my portfolio site, I faced the need to visualize a hierarchical data structure related to my previous role. This realization prompted me to build a recursive React component, allowing for dynamic and scalable rendering of the experience page.

This pattern, where a React component renders itself, is known as recursion. It's especially valuable for visualizing nested data structures, for example, file directories or organizational hierarchies.

Due to its scalability, this component is agnostic to data depth and modifications, allowing for seamless updates as long as the data schema is unchanged.

This represents the data's type definition.

interface ExperienceSchema {
  name: string;
  time: string;
  position: string;
  children?: ExperienceSchema[];
}

Now, let's look at the minimal code required.

const RecursiveTimeline = 
    ({ name, time, position, children }: Experience) => {
  return (
    <li>
      <time>{time}</time>
      <h3>
        {name} - {position}
      </h3>
      {!!children &&
        children.map((child) => (
          <ol key={`${child.name}-${child.time}`}>
            <RecursiveTimeline {...child} />
          </ol>
        ))}
    </li>
  );
};

// Parent component
export default function Home() {
  return (
    <ol>
      {parsedData.map((exp) => (
        <RecursiveTimeline key={exp.name} {...exp} />
      ))}
    </ol>
  );
}

This component renders a timeline item, displaying time, name, and position. For nested entries, it recursively renders child components within ordered lists, creating a hierarchical timeline.

Using the parsedData array, the parent component generates the timeline by rendering a RecursiveTimeLine for every experience entry.

Let's turn our attention to the data.

data.json

[
  {
    "name": "ION",
    "position": "Software Engineer",
    "time": "February 2023",
    "children": [
      {
        "name": "ION Treasury",
        "position": "Software Engineer",
        "time": "June 2023"
      },
      {
        "name": "Lab49",
        "position": "Software Engineer Consultant",
        "time": "February 2023",
        "children": [
          {
            "name": "Morgan Stanley",
            ...

Although the component can consume the data as-is, parsing it with zod provides robust data validation and stability. We'll start by installing the zod library and proceed to define a schema that reflects the data's structure.

npm install zod

schema.ts

import { z } from 'zod';

interface ExperienceSchema {
  name: string;
  time: string;
  position: string;
  children?: ExperienceSchema[];
}

export const experienceSchema: z.Schema<ExperienceSchema> = z.object({
  name: z.string(),
  time: z.string(),
  position: z.string(),
  children: z.lazy(() => experienceSchema.array()).optional(),
});

export type Experience = z.infer<typeof experienceSchema>;

Due to limitations in type inference with zod's lazy function, the ExperienceSchema interface is explicitly used to define the schema's type. This ensures that type inference from the schema yields the ExperienceSchema type.

Parsing the data with zod

Home

import { z } from 'zod';
import { experienceSchema } from '@/utils/schema';
import rawExpData from '@/data/data.json';

const experienceListSchema = z.array(experienceSchema);
const parsedData = experienceListSchema.parse(rawExpData);

Because experienceSchema defines the structure of a single experience object, while the data is an array of experiences, we create experienceListSchema to parse the entire array. During data modification, the zod parser will throw an error if the data deviates from the schema. Alternatively, safeParse can be used for non-throwing validation.

Let's give the component a more refined look with Tailwind.

RecursiveTimeline component

export const RecursiveTimeline = ({
  name,
  time,
  position,
  children,
}: Experience) => {
  return (
    <li className="mb-10 ms-4">
      {/* Dot on the timeline */}
      <div className="absolute w-3 h-3 bg-gray-400 rounded-full mt-1.5 -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
      <time className="mb-1 text-sm font-normal leading-none text-gray-400">
        {time}
      </time>
      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
        {name} - {position}
      </h3>
      {!!children &&
        children.map((child) => (
          <ol
            key={`${child.name}-${child.time}`}
            className="relative border-s border-gray-200 dark:border-gray-700"
          >
            <RecursiveTimeline {...child} />
          </ol>
        ))}
    </li>
  );
};

The resulting visual output is depicted in this screenshot.

This component is implemented on my experience page and within a skills modal. The modal provides a flattened view of company experiences when clicked on a skill e.g. TypeScript or React in the home page under My Skills section.