change state of view of custom component in Atlassian UI kit (with Forge)

Question

I would like to set the state of a checkbox to true in a custom component for Atlassian Jira when a button is clicked. I am using the UI kit with Forge.

So what do I have to write in the line // todo: check Checkbox "V2"?

import ForgeUI, { CustomField, CustomFieldEdit, render, Text, TextField, useProductContext, CheckboxGroup, Checkbox, Select, Option, Button } from "@forge/ui";


const View = () => {
  const { extensionContext: { fieldValue } } = useProductContext();

  return (
    <CustomField>
      <Text
        content={`Hello ${fieldValue || "world"}!`}
      />
    </CustomField>
  );
};

const Edit = () => {
  const onSubmit = values => {
      return values.text
  };
  
  const onClick = () => {
    // todo: check Checkbox "V2"
  };

  return (
    <CustomFieldEdit onSubmit={onSubmit}>
      <CheckboxGroup label="Products" name="products">
        <Checkbox value="V1" label="V1" />
        <Checkbox value="V2" label="V2" />
        <Checkbox value="V3" label="V3" />
      </CheckboxGroup>
      <Button text="button" onClick={onClick} />
    </ CustomFieldEdit>
  );
}

export const runView = render(
  <View/>
);

export const runEdit = render(<Edit/>)

Answer 1

I'm sure that you've already found the solution, but for anyone else who comes across this same question here's the answer:

You don't actually need the button as part of the checkbox group, save is provided as part of CustomFieldEdit and so you just want to update the onSubmit function

const onSubmit = values => {
  const products = values.products.toString()
  console.log(products);
  return products;
};

However, I noticed if you're using the sample project created with forge create, you'll also need to hop on over to the manifest.yml and either remove the validation expression or update it to allow commas and numbers, or you'll just get a validation error.

validation:
  expression: value == null || !!value.match("^[A-Za-z]+$")
  errorMessage: The value must consist only of letters

Hope that helps! For faster answers it's probably worth heading over to the Atlassian Developer Community