PracHub
QuestionsCoachesLearningGuidesInterview Prep
|Home/Other / Miscellaneous/Notion

Implement Recursive React JSON Viewer with Collapse

Last updated: May 20, 2026

Quick Overview

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.

  • medium
  • Notion
  • Other / Miscellaneous
  • Software Engineer

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.

|Home/Other / Miscellaneous/Notion

Implement Recursive React JSON Viewer with Collapse

Notion logo
Notion
Jul 17, 2025, 12:00 AM
mediumSoftware EngineerTechnical ScreenOther / Miscellaneous
35
0

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

  1. Support arbitrarily deep nesting by recursively rendering child components.
  2. Parse the input string safely; handle invalid JSON gracefully (show a helpful error without crashing).
  3. Maintain per-node expand/collapse state.
  4. Demonstrate the behavior using the input below. 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}}
  5. Briefly explain the component structure, state shape, and complexity considerations.

Assumptions

  • Use modern React (functional components + hooks, React 17/18+).
  • No external libraries required; plain CSS/inline styles are fine.
  • The component is read-only (no editing).

Constraints & Assumptions

  • Preserve the scope, facts, inputs, and requested outputs from the prompt above.
  • If the prompt leaves a detail unspecified, state a reasonable assumption before relying on it.
  • Keep the answer interview-ready: concise enough to present, but concrete enough to implement or evaluate.

Clarifying Questions to Ask

  • Clarify the goal, inputs, constraints, stakeholders, and success criteria.
  • State assumptions before using them.
  • Keep the answer grounded in the prompt rather than adding outside facts.

What a Strong Answer Covers

  • A structured framing of the problem and constraints.
  • A concrete approach with trade-offs and edge cases.
  • A way to validate the answer and communicate the recommendation.

Follow-up Questions

  • What assumption is most important to validate first?
  • What could make the answer fail in practice?
  • How would you explain the result to a non-technical stakeholder?
Loading comments...

Browse More Questions

More Other / Miscellaneous•More Notion•More Software Engineer•Notion Software Engineer•Notion Other / Miscellaneous•Software Engineer Other / Miscellaneous

Write your answer

Your first approved answer each day earns 20 XP.

Sign in to write your answer.
PracHub

Master your tech interviews with 8,000+ real questions from top companies.

Product

  • Questions
  • Learning Tracks
  • Interview Guides
  • Resources
  • Premium
  • For Universities
  • Student Access

Browse

  • By Company
  • By Role
  • By Category
  • Topic Hubs
  • SQL Questions
  • AI Coding Questions
  • Compare Platforms
  • Discord Community

Support

  • support@prachub.com
  • (916) 541-4762

Legal

  • Privacy Policy
  • Terms of Service
  • About Us

© 2026 PracHub. All rights reserved.