React Coding Interview Challenge 1

Render an arbitrarily nested JavaScript Object

This is the first in a series of 10 React coding interview-style problems, each complete with the problem specification and a summary of one approach to the solution.

Specification

Write a functional component that accepts an arbitrarily nested object as a prop. Each key/property of the object is a word and its associated value is either (1) an object of the same format or (2) a definition string. An example of one such object is below.

Though this example is nested at most 2 levels deep, the input may be more than 2 levels deep. When rendered, the component should display the nested object legibly, with each word shown beside its definition and each subobject indented beyond its enclosing object. The rendered component is pictured below:

The component displayed

Starter Code