Draw Circle components on map by array foreach show error

Question

I have some array of circles position that should be showed on leaflet map. I am using react-leaflet and Circles are drawn on screen but on console there is error.

Warning: Failed prop type: Invalid prop center supplied to Circle.

this is code with I am show this circles.

render() {
    return (
        <div className={'SeatsLayer'}>
            <Circle center={[0, 0]} radius={7} color={"red"} />
            {
                this.seats.map(seat => {
                    return (
                        <Circle key={seat['id']} center={[seat['x'], seat['y']]} radius={7} color={"red"} />
                    );
                })
            }
        </div>
    )
}

I must add that if I show circles without foreach there is no error.

render() {
    return (
        <div className={'SeatsLayer'}>
            <Circle center={[0, 0]} radius={7} color={"red"} />
        </div>
    )
}

Also, this logic works properly on the native leaflet.

Answer 1

出于某种原因，x和y是字符串，Circle组件正常显示但在控制台上仍显示错误。

render() {
    return (
        <div className={'SeatsLayer'}>
            {
                this.seats.map(seat => {
                    let x = parseInt(seat['x']);
                    let y = parseInt(seat['y']);
                    return (
                        <Circle key={seat['id']} center={[x, y]} radius={7} color={"red"} />
                    );
                })
            }
        </div>
    )
}