Demo code is not working at all.

[pzapo]

Trying to use shared demo code results in:

Warning: Failed prop type: The prop annotations is marked as required in Annotation, but its value is undefined.

which results in:
Uncaught TypeError: Cannot read property 'map' of undefined

Below is sample code that i tried to use.

import { OvalSelector, PointSelector, RectangleSelector } from "react-image-annotation/lib/selectors";
import React, { Component } from "react";

import Annotation from "react-image-annotation";
import Root from "react-image-annotation";
import img from "./cover.jpg";

export default class Simple extends Component {
	state = {
		annotations: [],
		annotation: {},
	};

	onChange = (annotation) => {
		this.setState({ annotation });
	};

	onSubmit = (annotation) => {
		const { geometry, data } = annotation;

		this.setState({
			annotation: {},
			annotations: this.state.annotations.concat({
				geometry,
				data: {
					...data,
					id: Math.random(),
				},
			}),
		});
	};

	render() {
		return (
			<Root>
				<Annotation
					src={img}
					alt="Two pebbles anthropomorphized holding hands"
					annotations={this.state.annotations}
					type={PointSelector}
					value={this.state.annotation}
					onChange={this.onChange}
					onSubmit={this.onSubmit}
					allowTouch
				/>
			</Root>
		);
	}
}

[rlodina]

Type property was wrong ...

type={PointSelector.type}

<Annotation
  src={img}
  alt="Two pebbles anthropomorphized holding hands"
  annotations={this.state.annotations}
  type={PointSelector.type}
  value={this.state.annotation}
  onChange={this.onChange}
  onSubmit={this.onSubmit}
  allowTouch
/>

[pzapo]

I have changed line of code that you have pointed out and nothing have changed. Still it goes same error "Uncaught TypeError: Cannot read property 'map' of undefined"

Even if you remove type prop completelty and use default value, it still crashes.

[rlodina]

I'm not sure about <Root> component ...

Please see a working sample:
https://codesandbox.io/s/test-react-image-annotation-5bq92

[pzapo]

Yes, removed the Root element was the issue. This component should be removed from samples.

OTOH, changing selector type always results in rectangle shape selector. What is the diffrence of changing selector is all works the same?
Is there a way to remove exisiting annotation or you have to program it yourself?

[rlodina]

Ops ... sorry my bad (the property is TYPE with uppercase)

type={PointSelector.TYPE}

I update the sample with tool selector ...
https://codesandbox.io/s/test-react-image-annotation-5bq92

[crossLineApex]

Can I get the working code for functional component , cause I'm unable to convert it

[crossLineApex]

Can we do an edit ,remove annotations apart from just submitting. I was working with props but I coudnt find a solution