Feature Layer not Rendering

[WarrenBuffering]

For whatever reason I can't get loadModules() to work with a FeatureLayer. Console.log(layer) shows the layer, so it's there. I've tried adding a new graphic too, similar to the example, but that won't render either.

/*=======App.js========*/

import React, { Component } from 'react';
import { Map } from 'react-arcgis';
import FeatureLayer from './FeatureLayer'

class App extends Component {

  render() {
    return (
      <div style={{ width: '100%', height: '100vh', backgroundColor: 'green'}}>
        <Map 
          mapProperties={{ basemap: 'streets' }}
          viewProperties={{ center: [-73.950, 40.702], zoom: 15 }}
        >
          <FeatureLayer />
        </Map>
      </div>
    )
  }
}

export default App



/*=======FeatureLayer.js========*/

import React, { Component } from 'react';
import { loadModules } from 'react-arcgis';
 
export default class FeatureLayer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            layer: null,
        };
    }
 
    render() {
        return null;
    }
 
    componentWillMount() {
        const { map, view, url } = this.props

        loadModules(['esri/layers/FeatureLayer', 'esri/Graphic']).then(([ FeatureLayer, Graphic ]) => {
            const layer = new FeatureLayer({
                url: 'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0',
                outFields: ['*']
            })
            this.props.map.add(layer)

            const point = { type: 'point', x: -73.950, y: 40.702, spatialReference: { wkid: 4326 } }
            const simpleMarker = {
                type: 'simple-marker',
                color: 'red',
                size: '10px',
                outline: {
                    color: 'black',
                    width: 3
                }
            }

            const graphic = new Graphic({
                geometry: point,
                symbol: simpleMarker
            })
            this.props.view.graphics.add(graphic)

            this.setState({ layer });
        }).catch((err) => console.error(err))
    }
 
    componentWillUnmount() {
        this.props.map.remove(this.state.layer)
    }
}

[jgravois]

nothing jumps out at me in your code, but i put together a small demo app in #72 and i wasn't able to reproduce the error you describe.

could you pull it down and give it a whirl yourself?

[nandakishor]

Hi,
I tried the as @andrewtelkamp but still not able to render the FeatureLayer.
Here are my files.
============App.js==========

===========MapView.js========

============Layer.js==========

Can you explain where I did mistakes so that, FeatureLayer not able to render?

=====config.js======