React MaterialUI - ExpansionPanelSummary - добавить счетчик в идентификатор id

Question

Мне нужна функциональность, которая может добавлять счетчик к идентификатору div всякий раз, когда вызывается функция рендеринга .Цель состоит в том, чтобы иметь уникальные элементы div.

Вот моя функция рендеринга -

render() {

    return (
        <div className={classes.root}>
            {
                someFunction.map(output => {
                    return (
                        <div>
                            <ExpansionPanel key={output.someKey} defaultExpanded={shouldExpand}>
                                <ExpansionPanelSummary expandIcon={<ExpandMoreIcon/>} >
                                    <div id="Kirti">
                                        <span>{output.someKey}</span>
                                        <span>"SomeText"</span>
                                    </div>
                                </ExpansionPanelSummary>
                                <ExpansionPanelDetails>
                                    <div> 
                                        {"Some Detail"}
                                    </div>
                                </ExpansionPanelDetails>
                            </ExpansionPanel>
                        </div>
                    )
                })
            }
        </div>
    )
}

Мне нужно добавить счетчик в div id = "Kirti".Что-то вроде

1. int count = 0;
2. Функция вызова вызова.
3. <div id=("Kirti"+count)>
4. count ++

Так как я могу иметь несколько div с идентификатором (начиная с) "Kirti", мне нужно сделать их уникальными, добавив этот счетчик.

Если для понимания этой проблемы требуется дополнительная информация, пожалуйста, сообщите мне.

Буду признателен за любые предложения.

Answer 1

Функция map имеет индекс / счетчик, который передается обратному вызову функции.

Итак, что вы хотите сделать:

{someFunction.map((output, index) =>
  <ExpansionPanel key={output.someKey} id={`panel-${index}`}>
    // more components here...
  </ExpansionPanel>
)}