Map not displaying renderer after adding classbreakrenderer

[SriharshaK]

I have tried to add a new field to existing feature layer and used random value generator to append those attributes on the map. Looks like after adding renderer only legend appears on the map with feature layer empty. Support needed.

     const map = new Map({
        basemap: "satellite",
      });
     const myFeatureLayer = new FeatureLayer({
        url: url,
        opacity: 0.8,
        outFields: ["*"],
      });
     map.add(myFeatureLayer);
     var tempObj = new Field({
          alias: 'RISK',
          name: 'RISK',
          type: 'integer'
        });

        myFeatureLayer.fields.push(tempObj);
        const queryNew = myFeatureLayer.createQuery();
        queryNew.spatialRelationship = "intersects";
        queryNew.returnQueryGeometry = true;
        var randArr = [];
        for (var i = 0; i < 756; i++) {
            randArr[i] = (Math.floor(Math.random() * 100) + 1);
        }
        myFeatureLayer.queryFeatures(queryNew).then((results) => {
          results.features.map((data, index) => {
            data.attributes.RISK = randArr[index]
          })
          var renderer = new ClassBreaksRenderer({
            field: "RISK",
          });

          renderer.addClassBreakInfo({ minValue:0, maxValue:10, symbol:new SimpleFillSymbol({
            color: new Color([56, 168, 0, 0.5]),
            outline: {
              width: 0.5,
              color: [50, 50, 50, 0.6]
            }
          })});
          renderer.addClassBreakInfo({ minValue:11, maxValue:30, symbol:new SimpleFillSymbol({
            color: new Color([139, 209, 0, 0.5]),
            outline: {
              width: 0.5,
              color: [50, 50, 50, 0.6]
            }
          })});
          renderer.addClassBreakInfo({ minValue:31, maxValue:50, symbol:new SimpleFillSymbol({
            color: new Color([255, 255, 0, 0.5]),
            outline: {
              width: 0.5,
              color: [50, 50, 50, 0.6]
            }
          })});
          renderer.addClassBreakInfo({minValue:51, maxValue:90, symbol:new SimpleFillSymbol({
            color: new Color([255, 128, 0, 0.5  ]),
            outline: {
              width: 0.5,
              color: [50, 50, 50, 0.6]
            }
          })});

          myFeatureLayer.renderer = renderer;

[JoelBennett]

The main problem with this is that in 4.x FeatureLayers, you don't have direct access to the Graphic (i.e. feature) objects that are displayed on the map.  The features returned by queryFeatures are a copy of the actual features, and so modifying them won't make any difference to the layer itself.

One of the best ways to accomplish what you're trying to do may be to query the features (as you're doing), but then set their symbol property directly, and then add them to a separate GraphicsLayer.