I am trying to create composite component in AEM SPA

[Rohan332552049n3r]

I am unable to create composite component in SPA
I am trying the link below. If anyone has any example composite component please do share
https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/spa...

I have Image component

import React, {Component} from 'react';
import {MapTo} from '@adobe/aem-react-editable-components';
import { withMappable } from '@adobe/aem-react-editable-components';

require('./Image.css');


export const ImageEditConfig = {

    emptyLabel: 'Image',

    isEmpty: function(props) {
        return !props || !props.src || props.src.trim().length < 1;
    }
};

export default class Image extends Component {

    get content() {
        return <img     className="Image-src"
                        src={this.props.src}
                        alt={this.props.alt}
                        title={this.props.title ? this.props.title : this.props.alt} />;
    }

    render() {
        if(ImageEditConfig.isEmpty(this.props)) {
            return null;
        }

        return (
                <div className="Image">
                    {this.content}
                </div>
        );
    }
}

export const AEMImage = withMappable(Image, ImageEditConfig);

Text Component

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ Copyright 2020 Adobe Systems Incorporated
 ~
 ~ Licensed under the Apache License, Version 2.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~
 ~     http://www.apache.org/licenses/LICENSE-2.0
 ~
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

import sanitizeHtml from 'sanitize-html';
import sanitizeWhiteList from '../sanitize-html.whitelist';

import React, { Component } from 'react';
import extractModelId from '../../utils/extract-model-id';
import { withMappable } from '@adobe/aem-react-editable-components';


require('./Text.css');

const TextEditConfig = {
  emptyLabel: 'Text',

  isEmpty: function (props) {
      return !props || !props.text || props.text.trim().length < 1;
  }
};

/**
 * Text React component
 */
class Text extends Component {
  get richTextContent() {
    return (
      <div
        id={extractModelId(this.props.cqPath)}
        data-rte-editelement
        dangerouslySetInnerHTML={{
          __html: sanitizeHtml(this.props.text, sanitizeWhiteList)
        }}
      />
    );
  }

  get textContent() {
    return <div>{this.props.text}</div>;
  }

  render() {
    return this.props.richText ? this.richTextContent : this.textContent;
  }
}

export default Text;
//export const AEMText = withMappable(Text, TextEditConfig);

On their own they are working fine but when I wrap them within my Composite component it fails

import React from 'react';
import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
import Text from '../Text/Text';

const ImageCard = () => {

  return (
    <Text/>
  );
};


export default withMappable(ImageCard);

MapTo('wknd-spa-react/components/imagecard')(ImageCard);

Please help me 

[EstebanBustamante]

Hi, 

What option are you following? How is your project structured, and what does your content look like? 

• The component does not exist in your AEM project.
• The component exists in your AEM project but its required content does not.
• The component and its required content both exist in your AEM project.

Something that I think you are missing is the "resourceType" in the TextEditConfig from your Text and Image component. Besides that are you seeing any console errors? Did you try to use the code provided in the link you shared?

[Rohan332552049n3r]

Component and its required content exist in the project.

I am able to add that Text and Image component on the page

No console errors

When I try to create a composite component combining image and text component to create a new component it fails.

My requirement is same as this GIF https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/spa...

[EstebanBustamante · Accepted solution]

I understand that, if you are using existing code you still need to decide on an approach depending if your content exists or not:

• The component exists in your AEM project but its required content does not.
• The component and its required content both exist in your AEM project. 

How are you using the ImageCard component? Can you post your HTML, and confirm if you are adding the resourceType as I suggested?

[kautuk_sahni]

@Rohan332552049n3r Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!