FeatureLayer not rendering, graphics added are not visible

RiteshSangwan

I am developing a single page react application and loaded esri api using react-esri-loader and esri-loader.

I am able to initiates a new Map instance as well as new MapView instance.

The map is rendering fine on the page but I am trying to add a FeatureLayer to my map. I am following the sandbox example here. The code is working fine in sandbox environment but nothing is displayed when I add the same code in my app.

Below is my code

<SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">this</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">map </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">=</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">new</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">this</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">props</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #2b91af; border: 0px; font-size: 13px;">Map</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">({</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> basemap</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">'streets'</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">});</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp; </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">this</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">mapView </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">=</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">new</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">this</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">props</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #2b91af; border: 0px; font-size: 13px;">MapView</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">({</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp; container</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">this</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">mapContainer</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp; map</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">this</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">map</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp; zoom</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">this</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">state</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">zoom</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp; center</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">this</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">state</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">center</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp; </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">});</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">this</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">mapView</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">on</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">(</SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">'click'</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">this</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">handleMapViewClick</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">bind</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">(</SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">this</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">));</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp; </SPAN><SPAN class="" style="color: #858c93; border: 0px; font-size: 13px;">// this.mapView.watch('extent', this.searchDonors.bind(this));</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp; </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">this</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">mapView</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">then</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">(()</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">=></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">{</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">var</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> data </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">=</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">[</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">{</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; location </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">{</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; coordinates </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">[</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">-</SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">73.9472609999999975</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">40.7332899999999967</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">],</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; type </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">"Point"</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">}</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">}</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">];</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">var</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> fields </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">=</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">[</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">{</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">"ObjectID"</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">alias</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">"ObjectID"</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; type</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">"oid"</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">}];</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #858c93; border: 0px; font-size: 13px;">// Create an array of Graphics from each GeoJSON feature</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">const</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> graphics </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">=</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> data</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">map</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">((</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">feature</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> i</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">)</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">=></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">({</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; geometry</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">new</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">this</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">props</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #2b91af; border: 0px; font-size: 13px;">Point</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">({</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; longitude</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> feature</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">location</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">coordinates</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">[</SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">0</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">],</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; latitude</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> feature</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">location</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">coordinates</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">[</SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">1</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">]</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">}),</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #858c93; border: 0px; font-size: 13px;">// select only the attributes you care about</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; attributes</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">{</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #2b91af; border: 0px; font-size: 13px;">ObjectID</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> i</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">}</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">}));</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">var</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> quakesRenderer </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">=</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">new</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">this</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">props</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #2b91af; border: 0px; font-size: 13px;">SimpleRenderer</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">({</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; symbol</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">new</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">this</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">props</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #2b91af; border: 0px; font-size: 13px;">SimpleMarkerSymbol</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">({</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; style</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">"circle"</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; size</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">20</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">[</SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">211</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">255</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">0</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">0</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">],</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; outline</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">{</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">1</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">"#FF0055"</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; style</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">"solid"</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">}</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">}),</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">});</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">var</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> lyr </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">=</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">new</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">this</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">props</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #2b91af; border: 0px; font-size: 13px;">FeatureLayer</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">({</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; source</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> graphics</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #858c93; border: 0px; font-size: 13px;">// autocast as an array of esri/Graphic</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #858c93; border: 0px; font-size: 13px;">// create an instance of esri/layers/support/Field for each field object</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fields</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> fields</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #858c93; border: 0px; font-size: 13px;">// This is required when creating a layer from Graphics</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; objectIdField</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">"ObjectID"</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #858c93; border: 0px; font-size: 13px;">// This must be defined when creating a layer from Graphics</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; renderer</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> quakesRenderer</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #858c93; border: 0px; font-size: 13px;">// set the visualization on the layer</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; spatialReference</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">{</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; wkid</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">4326</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">},</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; geometryType</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">"point"</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #858c93; border: 0px; font-size: 13px;">// Must be set when creating a layer from Graphics</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">});</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp; </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">this</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">map</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">add</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">(</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">lyr</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">);</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp; </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">});</SPAN>

I am not sure what is the issue with my code, there are no errors in the console.

NOTE: this.props.Map, this.props.FeatureLayer are the commonjs module already loaded. I am sure there is no error in loading as I can see the map being loaded on the screen. The only issue is FeatureLayer is not loaded, the marker is not visible on the screen. I am using the latest 4.3 version of the javascript API.

I asked this on SO. Here is the link to SO question.