How can the steps components in react be written dynamically?

< Steps progressDot current= {1} >

<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />

< / Steps >,
how many step are dynamically displayed based on the data transmitted in the background


assume that list is the data sent from the background

    const list = [
    { id: 1, name: '' }, 
    { id: 2, name: '' }, 
    { id: 3, name: '' },
    ]
<Steps progressDot current={1}>
    {
        list.map((item) => {
            return (
                <Step key={item.id} title={item.name} description={item.name} />
            )
        })
    }
</Steps>

it's simple

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e5394c-4c94c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e5394c-4c94c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?