How to pretty print JSON with React?
Interviewer Expectations for this Question
01
Core Competency
Assesses fundamental understanding of React conventions, runtime behavior, and memory/performance considerations.
02
Evaluation Criteria
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
Comprehensive Model Answer
Verified Solution
We can use <pre> tag so that the formatting of the JSON.stringify() is retained:
```jsx harmony
const data = { name: "John", age: 42 };
function User {
return <pre>{JSON.stringify(data, null, 2)}</pre>;
}
const container = createRoot(document.getElementById("container"));
container.render(<User />);
<details><summary><b>See Class</b></summary>
<p>
const data = { name: "John", age: 42 };
class User extends React.Component {
render() {
return <pre>{JSON.stringify(data, null, 2)}</pre>;
}
}
React.render(<User />, document.getElementById("container"));
```
</p>
</details>
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.