nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }
React setState()

kawishabbas
I am using esri-loader for React App. When i pass graphic to state it is not showing in my console it give blank array.
can any one guide me where i am going to mistake.
Consider line N0. 102 and 176
<SPAN class="keyword token">import</SPAN> React <SPAN class="keyword token">from</SPAN> <SPAN class="string token">'react'</SPAN>
<SPAN class="keyword token">import</SPAN> <SPAN class="punctuation token">{</SPAN> loadModules <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">from</SPAN> <SPAN class="string token">'esri-loader'</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">import</SPAN> Axios <SPAN class="keyword token">from</SPAN> <SPAN class="string token">'axios'</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="keyword token">export</SPAN> <SPAN class="keyword token">default</SPAN> <SPAN class="keyword token">class</SPAN> <SPAN class="token class-name">Database</SPAN> <SPAN class="keyword token">extends</SPAN> <SPAN class="token class-name">React<SPAN class="punctuation token">.</SPAN>Component</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="token function">constructor</SPAN><SPAN class="punctuation token">(</SPAN>props<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">super</SPAN><SPAN class="punctuation token">(</SPAN>props<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>state <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
            capacity<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">'96F'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
            comment<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">'kawish'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
            placement<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">'buried'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
            pop<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">'2100360'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
            geom<SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN>

        <SPAN class="punctuation token">}</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>button <SPAN class="operator token">=</SPAN> React<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createRef</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>line_button <SPAN class="operator token">=</SPAN> React<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createRef</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    <SPAN class="token function">componentDidMount</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

         <SPAN class="keyword token">let</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>props<SPAN class="punctuation token">.</SPAN>view
        <SPAN class="keyword token">let</SPAN> graphic

        <SPAN class="token function">loadModules</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">"esri/widgets/Sketch"</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"esri/tasks/support/Query"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/tasks/QueryTask"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'esri/widgets/Expand'</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"esri/Graphic"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/views/draw/Draw"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/geometry/geometryEngine"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/layers/GraphicsLayer"</SPAN>
        <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN>
            <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>Sketch<SPAN class="punctuation token">,</SPAN> Query<SPAN class="punctuation token">,</SPAN> QueryTask<SPAN class="punctuation token">,</SPAN> Expand<SPAN class="punctuation token">,</SPAN> Graphic<SPAN class="punctuation token">,</SPAN> Draw<SPAN class="punctuation token">,</SPAN> geometryEngine<SPAN class="punctuation token">,</SPAN> GraphicsLayer<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>


                view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>button<SPAN class="punctuation token">.</SPAN>current<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'top-left'</SPAN><SPAN class="punctuation token">)</SPAN>

                <SPAN class="comment token">// add the button for the draw tool</SPAN>
                view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>line_button<SPAN class="punctuation token">.</SPAN>current<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-left"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                <SPAN class="keyword token">const</SPAN> draw <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Draw</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                    view<SPAN class="punctuation token">:</SPAN> view
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                <SPAN class="comment token">// draw polyline button</SPAN>
                <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>buttonClick <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN><SPAN class="punctuation token">{</SPAN>
                    <SPAN class="comment token">// view.graphics.removeAll();</SPAN>

                    <SPAN class="comment token">// creates and returns an instance of PolyLineDrawAction</SPAN>
                    <SPAN class="keyword token">const</SPAN> action <SPAN class="operator token">=</SPAN> draw<SPAN class="punctuation token">.</SPAN><SPAN class="token function">create</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"polyline"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                    <SPAN class="comment token">// focus the view to activate keyboard shortcuts for sketching</SPAN>
                    view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">focus</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                    <SPAN class="comment token">// listen polylineDrawAction events to give immediate visual feedback</SPAN>
                    <SPAN class="comment token">// to users as the line is being drawn on the view.</SPAN>
                    action<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>
                        <SPAN class="punctuation token">[</SPAN>
                            <SPAN class="string token">"vertex-add"</SPAN><SPAN class="punctuation token">,</SPAN>
                            <SPAN class="string token">"vertex-remove"</SPAN><SPAN class="punctuation token">,</SPAN>
                            <SPAN class="string token">"cursor-update"</SPAN><SPAN class="punctuation token">,</SPAN>
                            <SPAN class="string token">"redo"</SPAN><SPAN class="punctuation token">,</SPAN>
                            <SPAN class="string token">"undo"</SPAN><SPAN class="punctuation token">,</SPAN>
                            <SPAN class="string token">"draw-complete"</SPAN>
                        <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                        updateVertices
                    <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>
            

                <SPAN class="comment token">// Checks if the last vertex is making the line intersect itself.</SPAN>
                <SPAN class="keyword token">function</SPAN> <SPAN class="token function">updateVertices</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                
                    <SPAN class="comment token">// create a polyline from returned vertices</SPAN>
                    <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>vertices<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        <SPAN class="keyword token">const</SPAN> result <SPAN class="operator token">=</SPAN> <SPAN class="token function">createGraphic</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                        <SPAN class="comment token">// if the last vertex is making the line intersects itself,</SPAN>
                        <SPAN class="comment token">// prevent the events from firing</SPAN>
                        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>result<SPAN class="punctuation token">.</SPAN>selfIntersects<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                            event<SPAN class="punctuation token">.</SPAN><SPAN class="token function">preventDefault</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                        <SPAN class="punctuation token">}</SPAN>
                    <SPAN class="punctuation token">}</SPAN>
                <SPAN class="punctuation token">}</SPAN>

                <SPAN class="comment token">// create a new graphic presenting the polyline that is being drawn on the view</SPAN>
                <SPAN class="keyword token">const</SPAN> createGraphic <SPAN class="operator token">=</SPAN>  <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN><SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">const</SPAN> vertices <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>vertices<SPAN class="punctuation token">;</SPAN>
                    view<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                    <SPAN class="comment token">// a graphic representing the polyline that is being drawn</SPAN>
                     graphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                        geometry<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                            type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"polyline"</SPAN><SPAN class="punctuation token">,</SPAN>
                            paths<SPAN class="punctuation token">:</SPAN> vertices<SPAN class="punctuation token">,</SPAN>
                            spatialReference<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">.</SPAN>spatialReference
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                        symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                            type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// autocasts as new SimpleFillSymbol</SPAN>
                            color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">4</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">90</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">141</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                            width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4</SPAN><SPAN class="punctuation token">,</SPAN>
                            cap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"round"</SPAN><SPAN class="punctuation token">,</SPAN>
                            join<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"round"</SPAN>
                        <SPAN class="punctuation token">}</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setState</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                        geom<SPAN class="punctuation token">:</SPAN>graphic<SPAN class="punctuation token">.</SPAN>geometry
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
                
                    <SPAN class="comment token">// check if the polyline intersects itself.</SPAN>
                    <SPAN class="keyword token">const</SPAN> intersectingSegment <SPAN class="operator token">=</SPAN> <SPAN class="token function">getIntersectingSegment</SPAN><SPAN class="punctuation token">(</SPAN>graphic<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                    <SPAN class="comment token">// Add a new graphic for the intersecting segment.</SPAN>
                    <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>intersectingSegment<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        view<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addMany</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>graphic<SPAN class="punctuation token">,</SPAN> intersectingSegment<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN>
                    <SPAN class="comment token">// Just add the graphic representing the polyline if no intersection</SPAN>
                    <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
                        view<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN>

                    <SPAN class="comment token">// return intersectingSegment</SPAN>
                    <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">{</SPAN>
                        selfIntersects<SPAN class="punctuation token">:</SPAN> intersectingSegment
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>

                <SPAN class="comment token">// function that checks if the line intersects itself</SPAN>
                <SPAN class="keyword token">function</SPAN> <SPAN class="token function">isSelfIntersecting</SPAN><SPAN class="punctuation token">(</SPAN>polyline<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>polyline<SPAN class="punctuation token">.</SPAN>paths<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token"><</SPAN> <SPAN class="number token">3</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN>
                    <SPAN class="keyword token">const</SPAN> line <SPAN class="operator token">=</SPAN> polyline<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clone</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                    <SPAN class="comment token">//get the last segment from the polyline that is being drawn</SPAN>
                    <SPAN class="keyword token">const</SPAN> lastSegment <SPAN class="operator token">=</SPAN> <SPAN class="token function">getLastSegment</SPAN><SPAN class="punctuation token">(</SPAN>polyline<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    line<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removePoint</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> line<SPAN class="punctuation token">.</SPAN>paths<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">-</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                    <SPAN class="comment token">// returns true if the line intersects itself, false otherwise</SPAN>
                    <SPAN class="keyword token">return</SPAN> geometryEngine<SPAN class="punctuation token">.</SPAN><SPAN class="token function">crosses</SPAN><SPAN class="punctuation token">(</SPAN>lastSegment<SPAN class="punctuation token">,</SPAN> line<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>

                <SPAN class="comment token">// Checks if the line intersects itself. If yes, change the last</SPAN>
                <SPAN class="comment token">// segment's symbol giving a visual feedback to the user.</SPAN>
                <SPAN class="keyword token">function</SPAN> <SPAN class="token function">getIntersectingSegment</SPAN><SPAN class="punctuation token">(</SPAN>polyline<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="token function">isSelfIntersecting</SPAN><SPAN class="punctuation token">(</SPAN>polyline<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                            geometry<SPAN class="punctuation token">:</SPAN> <SPAN class="token function">getLastSegment</SPAN><SPAN class="punctuation token">(</SPAN>polyline<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
                            symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// autocasts as new SimpleLineSymbol</SPAN>
                                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"short-dot"</SPAN><SPAN class="punctuation token">,</SPAN>
                                width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3.5</SPAN><SPAN class="punctuation token">,</SPAN>
                                color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"yellow"</SPAN>
                            <SPAN class="punctuation token">}</SPAN>
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN>
                    <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>

                <SPAN class="comment token">// Get the last segment of the polyline that is being drawn</SPAN>
                <SPAN class="keyword token">function</SPAN> <SPAN class="token function">getLastSegment</SPAN><SPAN class="punctuation token">(</SPAN>polyline<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">const</SPAN> line <SPAN class="operator token">=</SPAN> polyline<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clone</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="keyword token">const</SPAN> lastXYPoint <SPAN class="operator token">=</SPAN> line<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removePoint</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> line<SPAN class="punctuation token">.</SPAN>paths<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">-</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="keyword token">const</SPAN> existingLineFinalPoint <SPAN class="operator token">=</SPAN> line<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getPoint</SPAN><SPAN class="punctuation token">(</SPAN>
                        <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN>
                        line<SPAN class="punctuation token">.</SPAN>paths<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">-</SPAN> <SPAN class="number token">1</SPAN>
                    <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                    <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">{</SPAN>
                        type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"polyline"</SPAN><SPAN class="punctuation token">,</SPAN>
                        spatialReference<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">.</SPAN>spatialReference<SPAN class="punctuation token">,</SPAN>
                        hasZ<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
                        paths<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
                            <SPAN class="punctuation token">[</SPAN>
                                <SPAN class="punctuation token">[</SPAN>existingLineFinalPoint<SPAN class="punctuation token">.</SPAN>x<SPAN class="punctuation token">,</SPAN> existingLineFinalPoint<SPAN class="punctuation token">.</SPAN>y<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                                <SPAN class="punctuation token">[</SPAN>lastXYPoint<SPAN class="punctuation token">.</SPAN>x<SPAN class="punctuation token">,</SPAN> lastXYPoint<SPAN class="punctuation token">.</SPAN>y<SPAN class="punctuation token">]</SPAN>
                            <SPAN class="punctuation token">]</SPAN>
                        <SPAN class="punctuation token">]</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>
               console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>state<SPAN class="punctuation token">.</SPAN>geom<SPAN class="punctuation token">)</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    save <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">async</SPAN> <SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN><SPAN class="punctuation token">{</SPAN>
        <SPAN class="comment token">//console.log(e)</SPAN>
        <SPAN class="keyword token">const</SPAN> params <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">URLSearchParams</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        params<SPAN class="punctuation token">.</SPAN><SPAN class="token function">append</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'capacity'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'haseeb'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        params<SPAN class="punctuation token">.</SPAN><SPAN class="token function">append</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'comment'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>state<SPAN class="punctuation token">.</SPAN>comment<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        params<SPAN class="punctuation token">.</SPAN><SPAN class="token function">append</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'placement'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>state<SPAN class="punctuation token">.</SPAN>placement<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        params<SPAN class="punctuation token">.</SPAN><SPAN class="token function">append</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'pop'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>state<SPAN class="punctuation token">.</SPAN>pop<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
       <SPAN class="comment token">// params.append('geom', this.state.geom);</SPAN>
    
        <SPAN class="keyword token">await</SPAN> Axios<SPAN class="punctuation token">.</SPAN><SPAN class="token function">post</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"http://localhost:8080/post"</SPAN><SPAN class="punctuation token">,</SPAN> params<SPAN class="punctuation token">)</SPAN>
            <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>response <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">.</SPAN>data<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN>
            <SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">catch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN>err<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>err<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>
    <SPAN class="token function">render</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">(</SPAN>
            <SPAN class="operator token"><</SPAN>div<SPAN class="operator token">></SPAN>
                <SPAN class="operator token"><</SPAN>div
                    ref<SPAN class="operator token">=</SPAN><SPAN class="punctuation token">{</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>line_button<SPAN class="punctuation token">}</SPAN>
                    <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-widget esri-widget--button esri-interactive"</SPAN>
                    title<SPAN class="operator token">=</SPAN><SPAN class="string token">"Draw polyline"</SPAN>
                    onClick<SPAN class="operator token">=</SPAN><SPAN class="punctuation token">{</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">buttonClick</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">}</SPAN>
                <SPAN class="operator token">></SPAN>
                    <SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-icon-polyline"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN>
                <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
                <SPAN class="operator token"><</SPAN>form<SPAN class="operator token">></SPAN>
                    <SPAN class="operator token"><</SPAN>label<SPAN class="operator token">></SPAN>Capacity<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>label<SPAN class="operator token">></SPAN>
                    <SPAN class="operator token"><</SPAN>input type<SPAN class="operator token">=</SPAN><SPAN class="string token">"text"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>

                    <SPAN class="operator token"><</SPAN>label<SPAN class="operator token">></SPAN>Comment<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>label<SPAN class="operator token">></SPAN>
                    <SPAN class="operator token"><</SPAN>input type<SPAN class="operator token">=</SPAN><SPAN class="string token">"text"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>

                    <SPAN class="operator token"><</SPAN>label<SPAN class="operator token">></SPAN>Placement<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>label<SPAN class="operator token">></SPAN>
                    <SPAN class="operator token"><</SPAN>input type<SPAN class="operator token">=</SPAN><SPAN class="string token">"text"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>

                    <SPAN class="operator token"><</SPAN>label<SPAN class="operator token">></SPAN>POP<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>label<SPAN class="operator token">></SPAN>
                    <SPAN class="operator token"><</SPAN>input type<SPAN class="operator token">=</SPAN><SPAN class="string token">"text"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>

                    <SPAN class="operator token"><</SPAN>label<SPAN class="operator token">></SPAN>Geometry<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>label<SPAN class="operator token">></SPAN>
                    <SPAN class="operator token"><</SPAN>input type<SPAN class="operator token">=</SPAN><SPAN class="string token">"text"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>br <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>

                    <SPAN class="operator token"><</SPAN>button ref<SPAN class="operator token">=</SPAN><SPAN class="punctuation token">{</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>button<SPAN class="punctuation token">}</SPAN> onClick<SPAN class="operator token">=</SPAN><SPAN class="punctuation token">{</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>save<SPAN class="punctuation token">}</SPAN><SPAN class="operator token">></SPAN>Save<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN>

                <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>form<SPAN class="operator token">></SPAN>

            <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>


        <SPAN class="punctuation token">)</SPAN>

    <SPAN class="punctuation token">}</SPAN>

<SPAN class="punctuation token">}</SPAN>

<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>
Find more posts tagged with

Accepted answers

All comments

There are no accepted answers yet
Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.
Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.