Declare a Component

We'll declare a component to display a site. Inside de src folder, create a folder called components. Inside that folder, create a file called SiteContainer.tsx.

With Jinaga-React, you can create a specification that reads properties from a starting fact. Define a specification that starts with the Site fact.

import { field, jinagaContainer, mapProps, specificationFor } from "jinaga-react";

import { j } from "../jinaga-config";
import { Site } from "../model/site";

const siteSpecification = specificationFor(Site, {
  domain: field(d => d.domain)
});

So far we only have one property. It is mapped to the domain field of the Site fact.

Now map that property to a React component.

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

Finally, create a Jinaga container for that mapping.

export default jinagaContainer(j, siteMapping);

Now you can add this component to the app in App.tsx.

import SiteContainer from "./components/SiteContainer";

function App() {
  //...

  return (
    <div className="App">
      <SiteContainer fact={site} />
    </div>
  )
}

Continue With

Match Successor Facts