Can I use JSX to define component children?

[ahmafi]

The code below works, but I was wondering if I can define the component children with JSX (the commented code). I couldn't use JSX react fragments to wrap the children in it, and I don't want to put an unnecessary div for wrapping them. The problem is that we can't have multiple elements (sibling elements) in the top-level JSX.

// const components = (
//   <span>Component with styles</span>
//   <div class="cmp-css-a">Component A</div>
//   <div class="cmp-css-b">Component B</div>
// );

const components = `
    <span>Component with styles</span>
    <div class="cmp-css-a">Component A</div>
    <div class="cmp-css-b">Component B</div>
`;

export const plugin = (editor) => {
  editor.DomComponents.addType('g-text', {
    model: {
      defaults: {
        attributes: { class: 'cmp-css' },
        components: components,
        styles: `
          .cmp-css { color: red }
          .cmp-css-a { color: green }
          .cmp-css-b { color: blue }
  
          @media (max-width: 992px) {
            .cmp-css{ color: darkred; }
            .cmp-css-a { color: darkgreen }
            .cmp-css-b { color: darkblue }
          }
        `,
      },
    },
  });
};

Basically I want to have multiple elements together as a component, I'm not sure if it's a good idea or not yet. Should I use blocks or a component with multiple children? I want to put an input and it's corresponding label at the same time into the canvas.

[artf]

A component is always defined with a wrapper but a block could be an array of components (or like an HTML you have defined) but I'd always suggest using a single component to define your block.
About JSX, did you follow this guide?

[ahmafi]

Yes, I read this guide. About the component, I'm not sure if what you said is true, or if I'm missing something here. when we define a component with a string (like the code in my question), it doesn't have any wrappers, it might add a wrapper when it adds the component to the canvas, but when I want to add the same component with JSX I have to add a wrapper myself and then it will add another wrapper on top of it when it gets rendered into the canvas. I

[artf]

About the component, I'm not sure if what you said is true, or if I'm missing something here

When you define a component, there is always a root. In your example the g-text component will be a div (by default if you don't pass a custom tagName) containing your components defined as HTML string.
About the JSX support, I believe we simply miss the support for react fragment components (I'd be happy to merge a PR). Currently a workaround would be to use an array here, eg:

const components = [
  <span>Component with styles</span>,
  <div class="cmp-css-a">Component A</div>,
  <div class="cmp-css-b">Component B</div>,
];