feat: resolve id prop from component JSON root

README.md

@@ -90,7 +90,7 @@ const Example = () => {
 which would look up the `Button` component at index `0` in the `components` object, resolving to:
 
 ```jsx
-<Button>Hello, World!</Button>
+<Button id={0}>Hello, World!</Button>
 ```
 
 For `react-from-json` we use JSON, so we would write this:
@@ -105,6 +105,8 @@ For `react-from-json` we use JSON, so we would write this:
 }
 ```
 
+> The `id` here is set by the `componentIndex`, since we didn't specify one in the JSON. See <a href="#a-note-on-ids">this comment on IDs</a> for more information.
+
 #### Example
 
 Here's the same example as above, instead using a `<ComponentLookup />` for `entry.props.patty`, and providing a separate `components` object.
@@ -155,7 +157,11 @@ const Example = () => {
 };
 ```
 
-## With TypeScript
+### A note on ids
+
+`react-from-json` will map `id` from the root of your component JSON to the React component's `id` prop. Likewise, if you specify `id` under `props`, it will use this. If you use the `<ComponentLookup />` component, `react-from-json` will use the array index as `id` unless another `id` is specified. **Your `id` will always take priority.**
+
+### With TypeScript
 
 `react-from-json` supports generic types for use with TypeScript.
 

src/__helpers__/burger.tsx

@@ -5,13 +5,15 @@ export const Bun = ({ variant }: { variant: string }) => (
 );
 
 export const Patty = ({
+  id,
   size,
   ingredient
 }: {
+  id: number;
   size: string;
   ingredient: React.ReactNode;
 }) => (
-  <div>
+  <div id={`${id}`}>
     {`${size} patty`}
     {ingredient}
   </div>

src/__tests__/__snapshots__/index.tsx.snap

@@ -11,13 +11,17 @@ exports[`ReactFromJSON to render a flat entry with a components attribute 1`] =
     cheese
   </div>
   <div>
-    <div>
+    <div
+      id="0"
+    >
       large patty
       <div>
         impossible
       </div>
     </div>
-    <div>
+    <div
+      id="1"
+    >
       large patty
       <div>
         beef
@@ -43,13 +47,17 @@ exports[`ReactFromJSON to render a recursive entry 1`] = `
     cheese
   </div>
   <div>
-    <div>
+    <div
+      id="undefined"
+    >
       large patty
       <div>
         impossible
       </div>
     </div>
-    <div>
+    <div
+      id="undefined"
+    >
       large patty
       <div>
         beef

src/index.tsx

@@ -54,7 +54,13 @@ class ReactFromJSON<
 
     const component = components[componentType][componentIndex];
 
-    return this.renderComponent(component);
+    return this.renderComponent({
+      ...component,
+      props: {
+        id: component.id || componentIndex, // Map id to component props if specified on root. Otherwise, use index.
+        ...component.props
+      }
+    });
   };
 
   resolveProp = (prop: any): any => {