Example of rendering a React componet with Fluree data:
\n\n {predicate.name} {predicate.doc}\n
\n type: {predicate.type}\n
\n unique?: {predicate.unique === true ? \"true\" : \"false\"}\n
\n index?: {predicate.index === true ? \"true\" : \"false\"}\n
\n multi-cardinality?: {predicate.multi === true ? \"true\" : \"false\"}\n
\n component?: {predicate.component === true ? \"true\" : \"false\"}\n
Predicate Names are:
\n {predicateNames}\n\n Favorite color for {data.result.username} is: {data.result.favoriteColor}\n
\n );\n}\n\n// wrap standard React component with Fluree query, results will be injected\n// 'basic' style query shown below\nconst FavoriteColorFluree = flureeQL({\n selectOne: [\"username\", \"favoriteColor\"],\n from: [\"_user/username\", \"bob@example.com\"]\n})(FavoriteColor);\n\n// identical query as above, but with 'analytical' query style\nconst FavoriteColorFlureeAlt = flureeQL({\n selectOne: { \"?s\": [\"username\", \"favoriteColor\"] },\n where: [[\"?s\", \"_user/username\", \"bob@example.com\"]]\n})(FavoriteColor);\n```\n\n### Queries with variables\n\nQueries that will be used in multiple contexts should use\n[query variables](https://docs.flur.ee/docs/query/analytical-query#variables),\nallowing the query to be reusable (this also makes query parsing slightly more efficient).\n\n```jsx\n\n// for any query vars that are null, The React component's props will\n// be examined to see if there is a property with the same name as the missing\n// var (minus the leading '?') and it will be substituted.\nconst FavoriteColorFluree = flureeQL(\n {\n selectOne: {\"?s\": [\"username\", \"favoriteColor\"]},\n where: [[\"?s\", \"_user/username\", \"?username\"]], // ?username here is a query variable\n vars: {\"?username\": null} // note ?username is null, will look at React props for presence of 'username'\n }\n)(FavoriteColor);\n\n// this parent component will display our Fluree-enabled component\nfunction ParentComponent() {\n return (\nTwo users, same reusable component with different username property:
\nTwo users, same reusable component with different username property:
\n