2A02:C7F:22BE:A500:498:3225:1A16:A72D: Created page with " is a React component which is closely related to . They both are convenience components for obtaining data from your API; unlike Loop, Content is for grabb..."

2022-07-05T18:21:03Z

Created page with "<Content> is a React component which is closely related to <Loop>. They both are convenience components for obtaining data from your API; unlike Loop, Content is for grabb..."

New page

<Content> is a React component which is closely related to <[[Loop]]>. They both are convenience components for obtaining data from your API; unlike Loop, Content is for grabbing a singular item.

<syntaxhighlight lang="js">

import Content from 'UI/Content';

...

<Content type='user' id={14}>
{
(user, loading) => {
if(loading) {
return 'Getting user data..';
}

if(!user){
return 'User was not found.';
}

return <p>{user.username}</p>;
}
}
</Content>

</syntaxhighlight>

= Primary Content =

On [[Editing_Pages|pages with primary content]], <Content> can be used to directly obtain the primary content object:

<syntaxhighlight lang="js">

import Content from 'UI/Content';

...

<Content primary>
{
(blogPost, loading) => {
if(loading) {
return 'Getting post..';
}

if(!blogPost){
return 'Post was not found.';
}

return <h1>{blogPost.title}</h1>;
}
}
</Content>

</syntaxhighlight>

= Includes =

[[Includes]] are a mechanism in SocialStack for obtaining related data in the same API call. They are a feature of the [[public API]] but are exposed via Content too:

<syntaxhighlight lang="js">
import Content from 'UI/Content';

...

<Content type='page' id={1} includes={['creatorUser']}>
{(page, loading) => {
if(loading){
// Just an example.
return 'Loading..';
}

if(!page){
return 'Page does not exist';
}

return <div>
The page "{page.title}" was created by {page.creatorUser.username}
</div>;
}}
</Content>
</syntaxhighlight>

Content - Revision history

2A02:C7F:22BE:A500:498:3225:1A16:A72D: Created page with " is a React component which is closely related to . They both are convenience components for obtaining data from your API; unlike Loop, Content is for grabb..."