Rendering react components on newly create layer.

[Ricardo-C-Oliveira]

Hi,

I'm trying to render some react components inside a layer created by react-leaflet-draw.

This is my attempt:

    _onCreate(e) {
        var layer = e.layer
        layer.bindPopup(
            <Content>
                <Label>Flower Name</Label>
                <Input type="text" placeholder="Flower Name"/>
                <Label>Flower Index</Label>
                <Input type="number" placeholder="Flower Index"/>
                <Label>Flower Radius</Label>
                <Input type="number" placeholder="Flower Radius"/>
                <Button color="isSuccess" >Add Flower</Button>
            </Content>
        )
    }

The components are supplied by react-bulma.

But I try this approach I get the following error: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

If I make the content a simple string I get fields and a button but no access to external functions nor the actual Bulma components.

Essentially I want to be able to save the new shape on the database.

From a brief online search it seems that this is a limitation of react-leaflet, but I wanted to check here first.

Also, is this the best way to set a popup for a newly created shape? I'm having a hard time translating the regular leaflet-draw approaches to react-leaflet-draw.

[Ricardo-C-Oliveira]

So apparently, in order to attach a popup to a recently created shape all I need to do is:

                    <FeatureGroup>
                        <EditControl position='topright' onEdited={this._onEditPath} onCreated={this._onCreate} onDeleted={this._onDeleted} draw={{
                            polygon: false,
                            circle: false,
                            polyline: false,
                            marker: false
                        }}/>
                        <Popup>
                                <Content>
                                <Label>Area Name</Label>
                                <Input type="text" placeholder="Arena Name" onChange={this.handleNameChange}/>
                                <Label>Study Area Description</Label>
                                <Input type="text" placeholder="Study Area Description" onChange={this.handleDescriptionChange}/>
                                <Button color="isSuccess" onClick={this.submitArea}>Add Area</Button>
                            </Content>
                        </Popup>
                    </FeatureGroup>