Use React in Tasklist Embedded Forms

Camunda 7 Topics Discussion & Questions
,
1

Hi all,

I’m trying to use React in the Camunda Tasklist in the Embedded Forms. It works so far by doing following: Using React Forms with Tasklist - Camunda.

As I want to use JSX I also have a Maven-Plugin in my project that transpiles the JSX Files to JS Files which then can be used in the html-File. Also this works.

Now as I want to structure my project well and use child components in childs I wanted to ask if this is feasible. Let’s assume I have a Component:

class MyComponent extends React.Component {
    constructor(props) {
    	super(props);
    	this.state = { ...this.props.myObject};
    	this.changeMyObject = this.changeMyObject.bind(this);
    }

    changeMyObject(event) {
    	const target = event.target;
    	const value = target.type === 'checkbox' ? target.checked : target.value;
    	const name = target.name;

    	this.setState(previousState => ({ ...previousState, [name]: value }))
    	let myObject = this.state;
    	this.props.onChangeMyObject(myObject);
    } 

    render() {
           <div>
             .....
           </div>
    }
}

Now I want to use another Component into this Component, which is a sperate file. How can I do this. As I’m not in the Module-Environment I cannot use export and import, right?

At the end I want to include my transpiled component MyComponent as js-file in the html for the embedded form, to include it like this:

const container = document.getElementById('container');
ReactDOM.render(React.createElement(MyComponent), container);

Maybe someone can help?

Thanks and best regards
Alessandro