HELP In jira:projectSettingsPage: don´t show any form

Forge Forge UI Kit and Custom UI
1

Hello, (sorry about my english)
I create a form, and now i copy and paste a form from jira documentation. But when i go to the menu option created in the projectSettingsPage, don´t show the content. If i delete all that i have into the return ( and replace it with a its shows OK. This is my code if any could to help me, i apreciated so much. Thans.

import React, { useState } from "react";
import {
  Button,
  Form,
  TextField,
  CheckboxGroup,
  Checkbox,
  Text,
} from "@forge/react";

const App = () => {
  const [formState, setFormState] = useState(undefined);

  // Handles form submission
  const onSubmit = (formData) => {
    /**
     * formData:
     * {
     *    username: 'Username',
     *    products: ['jira']
     * }
     */
    setFormState(formData);
  };

  return (
    <>
      <Form onSubmit={onSubmit}>
        <TextField name="username" label="Username" />
        <CheckboxGroup name="products" label="Products">
          <Checkbox defaultChecked value="jira" label="Jira" />
          <Checkbox value="confluence" label="Confluence" />
        </CheckboxGroup>
      </Form>
      {formState && <Text>{JSON.stringify(formState)}</Text>}
    </>
  );
};

export default App;
2

Hi @HoracioRey,

It looks like you might be using the CheckboxGroup incorrectly. Are you able to share where you’re seeing this example in the documentation so I can review it?

In the meantime, here’s an example that i’ve checked works:

import React, { useEffect, useState } from 'react';
import ForgeReconciler, { Button, CheckboxGroup, Form, FormFooter, FormSection, Label, Text, useForm } from '@forge/react';
import { invoke } from '@forge/bridge';

const App = () => {
  const [data, setData] = useState(null);
  const [formData, setFormData] = useState(null);

  const { handleSubmit , register, getFieldId  } = useForm();

  const saveState = (data) => {
    // handle data inputs
    console.log("Form saved: ");
    setFormData(data.myCheckbox);
    console.log(data);
  };

  const options = [
    { value: "jira", label: "Jira" },
    { value: "confluence", label: "Confluence" },
  ];


  useEffect(() => {
    invoke('getText', { example: 'my-invoke-variable' }).then(setData);
  }, []);
  

  return (
    <>
      <Text>Hello world!</Text>
      <Text>{data ? data : 'Loading...'}</Text>
      <Form onSubmit={handleSubmit(saveState)}>
        <FormSection>
          <Label labelFor={getFieldId("myCheckbox")}>
            Products
          </Label>
          <CheckboxGroup
            {...register("myCheckbox", { required: true })}
            name="myCheckbox"
            options={options}
          />
        </FormSection>
        <FormFooter align="start">
          <Button appearance="primary" type="submit">
            Submit
          </Button>
        </FormFooter>
      </Form>
      {formData ? <Text>Form Data: {formData}</Text> : null}
    </>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

if this answered your question, please be sure to select it as an answer!
All the best,
Mel