Forge Table renders before data is ready

Forge Forge Custom UI and UI kit (beta)
1

Hi my goal is to query an api and show the results in a table, I have been using the UI kit category and the confluence macro template, the api query is successful but the table is always empty but confusingly when I use JSON.stringify to output it the data shows with no issue on the page but it doesn’t look very nice which is why I am trying to use a table. Would anyone be able to help me with this?

a simplified version of my code is

//various import statements
//various functions
const App =() =>{
      const ans = useState(async () => await getStuff());
      return(
                   <Fragment>
                         <Text> Stuff:{JSON.stringify(data, null,4)}</Text>
                         <Table>
                                <Head>
                                          <Cell>
                                                  <Text> Column 1</Text>
                                          </Cell>
                                          ......
                                          ......
                                </Head>
                                {data.map(issue => (
                                      <Row>
                                          <Cell>
                                                 <Text>{issue.c1}</Text>
                                          </Cell>
                                          ....
                                          ....
                                      </Row>))};
                                </Table>
                         </Fragment>);
};
export const run =render( <Macro app={<App />} />);
2

The data is there since it’s being rendered in a sibling component. Something is wrong with your code that converts it into Rows. Wild guess from your code: Is data an object instead of an array? That would cause the problem you’re seeing.

3 Likes
3

Thanks, that fixed it I updated
const ans = useState(async () => await getStuff());
to
const [ans] = useState(async () => await getStuff());
and it now works. Thanks I am new to using javascript or any front end development, the lack of being able to play around/debug the variables is throwing me as the only thing I can do to check a variable is log it to the console where I can see what it looks like and use typeof to see its type, Do you know is there a way to get the variables to show up in the console?

1 Like