Implement Recursive React JSON Viewer with Collapse
Company: Notion
Role: Software Engineer
Category: Other / Miscellaneous
Difficulty: medium
Interview Round: Technical Screen
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.
Quick Answer: 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.