Forge Custom UI Not Loading

Hello all. We are ver new to the Forge platform, developing a project for the upcoming CodeGaist 2021 hackathon.

We are trying to create a custom UI for our application. However, we are having problems getting the content to show up. I have included the code below.

import React, { useEffect, useState } from 'react';
import { invoke } from '@forge/bridge';

import ReactDOM from 'react-dom';
import '@atlaskit/css-reset';
import initialData from './initial-data';
import Column from './column';

function App() {
  const [data, setData] = useState(initialData);
  const cols = => {
    const column = data.columns[columnId];
    const tasks = => data.tasks[taskId]);
    return <Column key={} column={column} tasks={tasks} />
  return (
        { cols }

export default App;

However, when we deploy the application, the content of the app is blank. I have also included a screenshot of our output.

Would appreciate any help. Thanks in advance.

1 Like

Hello @RackshaAtlas

Please, I think you can simplify the data initially received (you can use useEffect to get the column data and use useState to set it).

For columns, data may have this structure.

    columns: [
           column: column, 
           tasks: tasks

then you can now map through the columns data to display what you wanna display. => (
    <Column key={} column={column} tasks={tasks} />
1 Like