React - Recursive Component

[201flaviosilva]

Example: https://www.olioapps.com/blog/react-recursion/

import React from "react";

export default function Branch({ title = "title", data }) {
	function renderBranch(key, index) {
		const item = data[key];

		if (Array.isArray(item)) {
			if (item.length > 0) return <Branch title={key} data={item} />;
			return null;

		} else if (typeof item === "object") {
			return <Branch title={key} data={item} />;

		} else {
			return (<p
				key={index}
				style={{ marginLeft: 4px }}
			>
				{key}: <span style={{ fontWeight: "bold" }}>{item}</span>
			</p>
			);
		}
	}

  return (
    <div>
      <h2>{title}</h2>
      <div>
        {
          Object.keys(data).map((key, index) => renderBranch(key, index))
        }
      </div>
    </div>
  );
}