I have created one SPA component but it is not appearing on page

[Ronnie09]

I have created spa component it is appearing in drag and drop section but in content tree I cant find my component. Even I checked content/ it is visible but on page it is not.​

Before writing react code I could see parsys of component and even author it but after writing react code and Java Code it is not comming 

Code

@Model(
    adaptables = SlingHttpServletRequest.class,
    adapters = { RonnieModel.class,
        ComponentExporter.class },
    resourceType = RonnieTestModelImpl.RESOURCE_TYPE,
    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
@Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION)
public class RonnieTestModelImpl implements RonnieTestModel{
    
    static final String RESOURCE_TYPE = "wknd-spa-react/components/ronnietest";

    @ValueMapValue
    private String description;
    
    @Override
    public String getExportedType() {
        return RonnieTestModelImpl.RESOURCE_TYPE;
    }

    @Override
    public String getDecription() {
        return description;
    }


}

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

export const CustomEditConfig = {

    emptyLabel: 'RonnieTestComponent',

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


export default class RonnieTest extends Component {
	
	render(){
		if(CustomEditConfig.isEmpty(this.props)) {
            return null;
        }
        
        return(
	<div className="ronnie-test-component">
		<div className="description-text">{this.props.description}</div>
	</div>
	
);
	}
}
MapTo('wknd-spa-react/components/ronnietest')(RonnieTest, CustomEditConfig);

Import component is also done as
RonnieTest Folder and RonnieTest.js is inside the folder

import './RonnieTest/RonnieTest';

[RajarshiRoy · Accepted solution]

Please check the json response from the exported model once .. that your props are correct or not.. if your data is ready we can look into react component.. !!

..../content/..../../ page.model.json like this...

you can get into documentation page ..

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/s...

[arunpatidar]

Import components from 

/ui.frontend/src/components/import-components.js