unique "key" prop error when looping PointerDirective

[Eddy Mackonade]

Hi all,

While using Array.map to loop and generate pointer (PointerDirective) for each value of my data on the linear gauge component, I encounter the error:

Each child in an array or iterator should have a unique "key" prop

I have checked the API for pointer on https://ej2.syncfusion.com/react/documentation/api/linear-gauge/pointer/ but there is no such prop.

Any help would be appreciated. Thank you.

Regards,

Eddy

[Indumathi Ravi]

Hi Eddy, 

  

Thank you for contacting Syncfusion support. 

  

We are unable to reproduce the reported issue in the React application. We have rendered the pointers in the Linear Gauge control using the “map” function for looping with the array of pointer values. Please find the code snippet for the same below. 

  

Code Snippet: 

var pointerValues = [0, 20, 40, 50, 80]; 

  

render() { 

return( 

            ... 

            <PointersDirective> 

              {pointerValues.map(item=> ( 

                <PointerDirective 

                    value={item} 

                    color="blue" 

                    markerType="Circle" 

                 /> 

                ))} 

            </PointersDirective> 

             ... 

       ); 

} 

  

  

We have created a sample to demonstrate the same and it can be found from the below link. 

https://stackblitz.com/edit/react-qjwdcw-5pfbbm?file=index.js 

  

Please let us know if you need any further assistance. 

  

Regards, 

Indumathi R. 

[Eddy Mackonade]

Thank you !

[Indumathi Ravi]

Hi Eddy, 

Thank you for the update. 

 

Please let us know if you need any further assistance.
 

 

Regards,
Indumathi R.