AEM React wont render title from dialog

[stefanjank]

I have this in model

static final String RESOURCE_TYPE = "sample/components/header";

@ValueMapValue
private String title;

@Override
public String getTitle() {
        return title;
        }

@Override
public String getExportedType(){
        return HeaderModelImpl.RESOURCE_TYPE;
        }

This is content from dialog

<content
            granite:class="cmp-container__editor"
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<tabs
                    jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/tabs"
                            maximized="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<uploadBackground
                            jcr:primaryType="nt:unstructured"
                                    jcr:title="Background"
                                    sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<columns
                                    jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                            fieldLabel="Layout"
                                            margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<file
                                            granite:class="cmp-image__editor-file-upload"
        jcr:primaryType="nt:unstructured"
        sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
class="cq-droptarget"
        fileNameParameter="./fileName"
        fileReferenceParameter="./fileReference"
        mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"
        name="./file"/>
</items>
</columns>
</items>
</uploadBackground>
<title
                            jcr:primaryType="nt:unstructured"
                                    jcr:title="Title"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                    fieldLabel="Header title"
                                    name="./title"/>
</items>
</tabs>
</items>
</content>

 React part

class Header extends Component {

    get content() {
        return (
                <div>
                {this.title}
                </div>
        );
    }

    get title() {
        if (this.props.title) {
            return <h4>{this.props.title}</h4>;
        }

        return null;
    }


    render() {
        if (HeaderEditConfig.isEmpty(this.props)) {
            return null;
        }
        return (<div className="text">
                {this.title}
                </div>);

    }

}

export default MapTo("sample/components/header")(Header, HeaderEditConfig);

 But when I add that component on page and submit some text in dialog nothing is happening, blank page

[arunpatidar]

Hi,

Have you added your react component in /ui.frontend/src/components/import-components.js

e.g.

import './Page/Page';
import './Text/Text';
import './CustomComp/CustomComp';

[stefanjank]

Hi, I have that, anyway I fixed it, can you help me how to render image?

I have next stuff for image

@ValueMapValue
private String fileReference;

@Override
public String getFileReference() {
    return fileReference;
}

<file
        granite:class="cmp-image__editor-file-upload"
        jcr:primaryType="nt:unstructured"
        sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
        class="cq-droptarget"
        fileNameParameter="./fileName"
        fileReferenceParameter="./fileReference"
        mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"
        name="./file"/>

But how to render it react? For title I created like this and title is rendering, but dont know about image

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


export const HeaderEditConfig = {
    emptyLabel: "Header",

    isEmpty: function (props) {
        return !props || !props.title || !props.file;
    },
};

class Header extends Component {

    get content() {
        return (
            <div>
                <img src={this.props.file}/>
                {this.title}
            </div>
        );
    }

    get title() {
        if (this.props.title) {
            return <h4>{this.props.title}</h4>;
        }

        return null;
    }


    render() {
        if (HeaderEditConfig.isEmpty(this.props)) {
            return null;
        }
        return (<div className="text">
            {this.title}
        </div>);

    }

}

export default MapTo("sample/components/header")(Header, HeaderEditConfig);

[arunpatidar]

you need to use fileReference

<img src={this.props.fileReference}/>

 look for json properties.

[stefanjank]

Where exactly