Getting GeoJson data from the map using React-Leaflet

Question

I'm trying to retrieve the GeoJson data of a circle with a certain fixed radius on the map. I'm not able understand how do I retrieve the GeoJson data object from the map. According to the docs, using FeatureGroup should help, but i'm failing to understand how to implement it in React. Thanks in Advance !

import React, {Component} from 'react';
import Geosuggest from 'react-geosuggest';
import { Map, Marker, Popup, TileLayer, Circle, FeatureGroup } from 'react-leaflet';
import Slider from 'react-rangeslider';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      lat: 18.572605,
      lng: 73.878208,
      zoom: 13,
      value: 500
    }
    this.onSuggestSelect = this.onSuggestSelect.bind(this);
  }

  onSuggestSelect(suggest) {
    console.log(suggest)
    this.setState({
      lat: suggest.location.lat,
      lng: suggest.location.lng,
    })
  }

  handleChangeStart = () => {
    console.log('Change event started')
  };

  handleChange = value => {
    this.setState({
      value: value
    })
  };

  handleChangeComplete = () => {
    console.log('Change event completed')
  };

  render() {
    const position = [this.state.lat, this.state.lng];
    const { value } = this.state
    return (
      <div>
          <h1>Hello React :)</h1>
          <Geosuggest
          onSuggestSelect={this.onSuggestSelect}
          />
          <div >
            <Map style={{height: '600px', width: '500px'}} center={position} zoom={this.state.zoom}>
              <TileLayer
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
              />
              <Circle center={position} radius={value} color="#FF4E00" />


              <Marker position={position}>
                <Popup>
                  <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
                </Popup>
              </Marker>
            </Map>
          </div>
          <div className='slider'>
            <Slider
              min={0}
              max={1000}
              value={value}
              onChangeStart={this.handleChangeStart}
              onChange={this.handleChange}
              onChangeComplete={this.handleChangeComplete}
            />
            <div className='value'>{value}</div>
          </div>
      </div>

    );
  }
}
export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

If you're simply trying to create geojson for a circle, perhaps you could use this library: https://www.npmjs.com/package/circle-to-polygon