Function createIssue(data) could not be cloned

Forge
,
1

Strangely when I loop an api response :

      .then((data) => {
        setRecommendations(
          data.map(
            (recommendation) =>
              new RecommendationIssueCreator(
                recommendation,
                props.data.projectKey,
                props.data.issueTypeId,
                props.data.assignee
              )
          )
        );
      });

and the RecommendationIssueCreator looks like this :

import ForgeUI, { Form, TextArea } from "@forge/ui";
import api, { route } from "@forge/api";

function RecommendationIssueCreator(
  recommendation,
  projectKey,
  issueTypeId,
  assignee
) {
  function createIssue(data) {
    console.log(data);

  }
  return (
    <Form onSubmit={createIssue} submitButtonText="Create Jira Issue">
      <TextArea
        label={recommendation.title}
        name={"recommendation_" + recommendation.id}
        defaultValue={recommendation.description}
        
      />
    </Form>
  );
}

export default RecommendationIssueCreator;

I get the error below

ERROR   09:53:41.260  44159e2309ea7ce7  function createIssue(data) {
    console.log(data);
  } could not be cloned.
TypeError: function createIssue(data) {
    console.log(data);
  } could not be cloned.
    at n.wrapValue (bootstrap.js:1:2984)
    at n.wrap (bootstrap.js:1:2344)
    at bootstrap.js:1:3109
    at Array.map (<anonymous>)
    at n.wrapArray (bootstrap.js:1:3097)
    at n.wrap (bootstrap.js:1:2414)
    at bootstrap.js:1:1642
    at Array.map (<anonymous>)
    at n.applyIgnored (bootstrap.js:1:1630)
    at bootstrap.js:1:9840

I fI remove this: onSubmit={createIssue} from the Form it loads without the error, so what I’m really missing here?

2

Hi @JalalSordo,

Great question. Because UI kit is run within a serverless function, the values stored via useState (which is where I’m assuming setRecommendations is coming from) must be serialized and passed back to the product until the serverless function is invoked again (e.g. when the form is submitted).

Unfortunately, functions such as createIssue cannot be serialized in this way. Rather than storing the components in the state, are you able to store the data in the state and use the data to create the components in the main function body instead?