Hi, I have just worked through the “hello world” examples etc and am trying to branch out a little bit from that - I am failing at the first hurdle! I have imported the “Tag” component UI and am trying to use it as part of the Fragment… however it doesnt seem to be recognised as a valid component - I must be missing something obvious but cant see it, please help!
Error Message
There was an error invoking the function - Unexpected child type: object. Valid children are @forge/ui components, function components, and strings.
Error occurred in Fragment:
in App
in IssuePanel
in
Error: Unexpected child type: object. Valid children are @forge/ui components, function components, and strings.
Error occurred in Fragment:
in App
in IssuePanel
in
at /tmp/tunnel7A5Jrx72s7P4u/index.js:29056:11
at asyncMap (webpack:///node_modules/@forge/ui/dist/cjs/reconcile.js:13)
at async /tmp/tunnel7A5Jrx72s7P4u/index.js:28995:29
at async asyncMap (webpack:///node_modules/@forge/ui/dist/cjs/reconcile.js:13)
at async /tmp/tunnel7A5Jrx72s7P4u/index.js:29053:23
at async asyncMap (webpack:///node_modules/@forge/ui/dist/cjs/reconcile.js:13)
at async /tmp/tunnel7A5Jrx72s7P4u/index.js:28995:29
at async asyncMap (webpack:///node_modules/@forge/ui/dist/cjs/reconcile.js:13)
at async /tmp/tunnel7A5Jrx72s7P4u/index.js:29053:23
at async /tmp/tunnel7A5Jrx72s7P4u/index.js:28920:31
index.jsx code
import api from "@forge/api";
import ForgeUI, { render, Fragment, Text, IssuePanel, useProductContext, useState, Tag, TagGroup } from "@forge/ui";
const fetchCommentsForIssue = async (issueId) => {
const res = await api
.asApp()
.requestJira(`/rest/api/3/issue/${issueId}/comment`);
const data = await res.json();
return data.comments;
};
const App = () => {
const context = useProductContext();
const [comments] = useState(async () => await fetchCommentsForIssue(context.platformContext.issueKey));
console.log(`Number of comments on this issue: ${comments.length}`);
return (
<Fragment>
<Text>Hello world!</Text>
<Text>
Number of comments on this page: {comments.length}
</Text>
<Tag text="tag 1" />
</Fragment>
);
};
export const run = render(
<IssuePanel>
<App />
</IssuePanel>
);