Implement Recursive React JSON Viewer with Collapse
React JSON Tree Viewer (Read-Only, Recursive)
Design and implement a React component that accepts a JSON string and renders a pretty-printed, read-only tree view. Each nested object or array must be collapsible/expandable via a toggle (e.g., a caret).
Requirements
- Support arbitrarily deep nesting by recursively rendering child components.
- Parse the input string safely; handle invalid JSON gracefully (show a helpful error without crashing).
- Maintain per-node expand/collapse state.
- Demonstrate the behavior using the provided input. The "school" node should be collapsible/expandable:
- Provided (non-strict) input:
{name: "bob", age: 5, nicknames: ["bobby", "bobman"], school: {name: "bob university", year: 2015}} - Valid JSON to use in the demo:
{"name":"bob","age":5,"nicknames":["bobby","bobman"],"school":{"name":"bob university","year":2015}}
- Provided (non-strict) input:
- Briefly explain the component structure, state shape, and complexity considerations.
Assumptions
- Use modern React (functional components + hooks, React 17/18+).
- No external libraries are required; plain CSS/inline styles are acceptable.
- The component is read-only (no editing functionality).
AI interview prep
Core dilemma
Balancing efficient rendering of potentially large and deeply nested data structures with intuitive, localized UI state management (collapse/expand) without re-rendering the entire tree unnecessarily.
3 tradeoffs and 3 stress tests locked
Interview prep
Unlock the interviewer X-Ray rubric, tradeoff matrix, stress tests, clarifying questions, and key concepts.
Implement Recursive React JSON Viewer with Collapse
React JSON Tree Viewer (Read-Only, Recursive)
Design and implement a React component that accepts a JSON string and renders a pretty-printed, read-only tree view. Each nested object or array must be collapsible/expandable via a toggle (e.g., a caret).
Requirements
- Support arbitrarily deep nesting by recursively rendering child components.
- Parse the input string safely; handle invalid JSON gracefully (show a helpful error without crashing).
- Maintain per-node expand/collapse state.
- Demonstrate the behavior using the provided input. The "school" node should be collapsible/expandable:
- Provided (non-strict) input:
{name: "bob", age: 5, nicknames: ["bobby", "bobman"], school: {name: "bob university", year: 2015}} - Valid JSON to use in the demo:
{"name":"bob","age":5,"nicknames":["bobby","bobman"],"school":{"name":"bob university","year":2015}}
- Provided (non-strict) input:
- Briefly explain the component structure, state shape, and complexity considerations.
Assumptions
- Use modern React (functional components + hooks, React 17/18+).
- No external libraries are required; plain CSS/inline styles are acceptable.
- The component is read-only (no editing functionality).