I can't create multiple progress bar components

[Marcelo Santana]

Hello. I have a component of progressBar, I need to have several progress bar simultaneously, but is showing only the last.

I've tried to use Useref, Forwardref. No ref, but it doesn't work.

[Nishanthi Panner Selvam]

Hi Marcelo Santana,

Thank you for reaching out to Syncfusion!

We have analyzed your query and recommend assigning a unique ID to each progress bar when rendering multiple progress bars dynamically.

For your reference, please find the following code snippet:

Index.js:

  const progressBars = [

        { id: "bar1", value: 30 }, //..]

<ProgressBarComponent 

                            id={bar.id} 

                            type='Linear' 

                            height='60' 

                            width="500" 

                            trackThickness="20" 

                            progressThickness="20" 

                            value={bar.value} 

                            animation={animation} 

                        />

Screenshot:

Sample: https://stackblitz.com/edit/react-rbe8mz75-qyfzsivv?file=index.js

If you still encounter issues, please share your sample (or) code snippet with full configurations, and we’d be happy to assist further.

Regards,

Nishanthi