api-nexus
Version:
Generation of API documentation for the GraphQl and Rest API
35 lines (31 loc) • 860 B
JSX
import React, { useState } from "react";
const TreeNode = ({ label, data, expanded = false }) => {
const [isExpanded, setIsExpanded] = useState(expanded);
const toggleExpanded = () => {
setIsExpanded(!isExpanded);
};
return (
<div>
<div
onClick={toggleExpanded}
className={`node-label ${isExpanded ? "expanded" : ""}`}
>
{isExpanded ? "▼" : "►"} {label}
</div>
{isExpanded && data !== null ? (
<ul className="node-list">
{Object.keys(data).map((key) => (
<li key={key}>
{typeof data[key] === "object" ? (
<TreeNode label={key} data={data[key]} />
) : (
`${key}: ${data[key]}`
)}
</li>
))}
</ul>
) : null}
</div>
);
};
export default TreeNode;