Katkat
Back

Implement Recursive React JSON Viewer with Collapse

NotionSoftware Engineer · Technical Screen
MediumSoftware EngineerTechnical ScreenSoftware Engineering Fundamentals

Last updated

Implement Recursive React JSON Viewer with Collapse evaluates requirements, assumptions, structured reasoning, trade-offs, and verification in a realistic interview setting. A strong answer states assumptions, handles edge cases, explains trade-offs, and shows how to validate the result clearly.

Build a React component that accepts a JSON string and renders a pretty-printed, read-only tree view. For each nested object or array, display a toggle (e.g., a 🔽 caret) to collapse/expand that node. Requirements: (

  1. Support arbitrarily deep nesting by recursively rendering child components. (
  2. Parse the input string safely; handle invalid JSON gracefully. (
  3. Maintain per-node expand/collapse state. (
  4. Demonstrate the behavior using input: {name: "bob", age: 5, nicknames: ["bobby", "bobman"], school: {name: "bob university", year: 2015}} where the "school" node can be toggled. (
  5. Briefly explain your component structure, state shape, and complexity considerations.