HOME DOCS PWA ABOUT
  1. Replicator
    1. Write
    2. Read
    3. Upgrading the Container
  2. Concepts
    1. Storing Information
    2. Writing Specifications
    3. Retrieving Information
  3. Create an App
    1. Create React App
    2. Install Jinaga
    3. Define a Model
    4. Initialize a Starting Point
    5. Declare a Component
    6. Match Successor Facts
    7. Declare a Child Component
  4. Write Tests
    1. Write Some Tests (JavaScript)
    2. Write Some Tests (TypeScript)
    3. Create Related Facts
    4. Query Facts
    5. Export the Model (JavaScript)
    6. Export the Model (TypeScript)
    7. Authorize Facts
  5. Conventions
    1. JavaScript
    2. TypeScript
  6. Reference
    1. Jinaga
      1. fact
      2. query
      3. watch
      4. for
      5. match
      6. exists
      7. notExists
      8. not
      9. hash
      10. login
      11. local
      12. service
      13. onError
      14. onLoading
      15. onProgress
      16. graphviz
      17. inspect
    2. Preposition
      1. then
    3. Syntax diagram
  7. Jinaga React
    1. Composition
    2. Field Specification Functions
      1. field
      2. projection
      3. collection
      4. property
      5. mutable
      6. array
  1. Create an App

Declare a Child Component

Let's go through the same steps of creating a component, but this time for the Post fact. Create a file in the components folder called PostComponent.tsx. In that file, first create a specification for the Post fact.

import { field, mapProps, specificationFor } from "jinaga-react";
import { j } from "../jinaga-config";
import { Post } from "../model/post";

const postSpecification = specificationFor(Post, {
  createdAt: field(d => d.createdAt)
});

Map the createdAt property to a React component. But instead of building a container from that mapping, we just export it.

export const postMapping = mapProps(postSpecification).to(({ createdAt }) => (
  <div>
    <h2>{createdAt as string}</h2>
  </div>
));

We're going to import it in SiteContainer.tsx and use it in the specification.

import { postMapping } from "./PostComponent";
import { collection } from "jinaga-react";
import { Post } from "../model/post";

const siteSpecification = specificationFor(Site, {
  domain: field(d => d.domain),
  Posts: collection(j.for(Post.forSite), postMapping)
});

We gave this property a capitalized name so that we can use it as a React component.

const siteMapping = mapProps(siteSpecification).to(({ domain, Posts }) => (
  <div>
    <h1>{domain}</h1>
    <Posts />
  </div>
));

So the full content of SiteContainer.tsx becomes:

import { field, jinagaContainer, mapProps, specificationFor } from "jinaga-react";
import { collection } from "jinaga-react";
import { postMapping } from "./PostComponent";
import { Post } from "../model/post";
import { j } from "../jinaga-config";
import { Site } from "../model/site";

const siteSpecification = specificationFor(Site, {
    domain: field(d => d.domain),
    Posts: collection(j.for(Post.forSite), postMapping)
  });

  const siteMapping = mapProps(siteSpecification).to(({ domain, Posts }) => (
    <div>
      <h1>{domain}</h1>
      <Posts />
    </div>
  ));

  export default jinagaContainer(j, siteMapping);

Now the app renders all of the posts in the Replicator. Give it a try. Run the app and see all of the posts you added to the Replicator. Change the createdAt field and add a new one. Then refresh the page to see if it shows up.

Continue With

Write Tests