Forge Custom UI - Passing Functions as Props to Child Component

Jira Development Jira Cloud
, ,
1

Hey folks,

If anyone could please help me out here, I’d really appreciate it. I have everything working except passing the functions in as props.

Thanks,
Bruber

What:
I am having an issue passing functions as props to a React component in order to get data out of that component. I receive an error in the CalcHtml component that getOriginalString is not defined.

Tried:

  1. Created component in standalone react app - works fine
  2. Tested using my custom ui app - I get an error when declaring the functions in the component when the component loads.

It looks like the props are not getting into the component when running as a custom UI component:

Code:

App.js

import React, { useEffect, useState } from 'react';
import { view } from '@forge/bridge';
import { storage } from '@forge/api';

import CalcHtml from './calc_html';
import { ContentAction } from '@forge/ui';

function App() {
  const [data, setData] = useState(null);
  const [issueKey, setIssueKey] = useState(null);

  function getIssueKey() {
    console.log('entering getIssueKey...');
    view.getContext().then((response)=>{
      console.log('response:', response);
      setIssueKey(response.extension['issue']['key'])
    });
  }

  function loadOriginalString(){
    console.log(storage.get(issueKey`-originalString`));
  };

  function loadModifiedString() {
    console.log(storage.get(issueKey`-modifiedString`));
  };

  useEffect(() => {
    getIssueKey(),
    loadOriginalString(),
    loadModifiedString()
  }, []);

  const props = {
    getOriginalString: (value) => {
      if (value === undefined){
        value = '';
      }
      storage.set(issueKey`-originalString`, value);
    },
    getModifiedString: (value) => {
      if (value === undefined){
        value = '';
      }
      storage.set(issueKey`-modifiedString`, value)
    }
  }

  return (
    <div>
      <CalcHtml props={props}></CalcHtml> 
    </div>
  );
}

export default App;

calc_html.js

import { useState } from 'react';
...other imports...

function CalcHtml({props}) {

   ...metric ton of other code removed...

    //return our original and current vector strings to the parent component.
    props.getOriginalString(originalString);
    props.getModifiedString(currentString);

    //render the interface
    return (
        <div>
            ...metric ton of html removed...
        </div>        
    );
}

export default CalcHtml();