I can't render custom editor

[oznmrt]

Hi Everyone,

I want to render custom editor like select option but nothing show up, i am sharing my code below. Am i missing something ?

Please help :)

` import { Button } from 'bootstrap'; import React, { useState } from 'react'; import { Col, FormControl, InputGroup, Row } from 'react-bootstrap'; import Annotation from 'react-image-annotation'

const AnnotationDemo = (props) => {

const [annotation, setAnnotation] = useState({});
const [annotations, setAnnotations] = useState([]);

const onChange = (annotation) => {
    setAnnotation(annotation)
}

const onSubmit = (annotation) => {
    debugger;
    const { geometry, data } = annotation
    setAnnotation({})
    var anData = annotations.concat({
        geometry,
        data: {
            ...data,
            id: Math.random()
        }
    })
    setAnnotations(anData)
}

const TestEditor = (props) => {
    debugger;
    return (
        <Button variant="outline-secondary" id="button-addon1" style={{
            position: "absolute",
            left: annotation.geometry.x + '%',
            top: annotation.geometry.y + annotation.geometry.height + '%'
        }}>
            Button
        </Button>
    )
}

return (
    <Row>
        <Col md={6} >
            <Annotation
                src={"https://placekitten.com/408/287"}
                alt='Two pebbles anthropomorphized holding hands'
                disableEditor
                annotations={annotations}
                renderEditor={props => <TestEditor {...props} />}
                value={annotation}
                onChange={onChange}
                onSubmit={onSubmit}
            />
        </Col>
    </Row>
);

}

export default AnnotationDemo; `

[tofiqquadri]

Change the function to:

const TestEditor = ({annotation}) => {
    return (
        <Button variant="outline-secondary" id="button-addon1" style={{
            position: "absolute",
            left: annotation.geometry.x + '%',
            top: annotation.geometry.y + annotation.geometry.height + '%'
        }}>
            Button
        </Button>
    )
}

<Annotation
                src={"https://placekitten.com/408/287"}
                alt='Two pebbles anthropomorphized holding hands'
                annotations={annotations}
                renderEditor={props => <TestEditor {...props} />}
                value={annotation}
                onChange={onChange}
                onSubmit={onSubmit} />