Как отключить отдельные кнопки в списке?

Question

У меня есть список элементов (создается динамически), и у каждого элемента есть соответствующая кнопка для удаления.Я пытаюсь отключить отдельные кнопки при нажатии.Я могу отключить одну кнопку с помощью отключенных проп и setState.Однако это может не соответствовать моему текущему варианту использования, когда элементы списка создаются динамически.При использовании метода setState мне может понадобиться создать дополнительное состояние для каждого созданного элемента.

Спасибо за ваш совет.

Редактировать: Я хотел бы создать список из N элементов, каждый элементс кнопкой удаления действия.Кроме того, каждая кнопка удаления должна быть отключена после первого щелчка для обработки (для предотвращения двойного щелчка).

Как уже упоминалось, использование кнопки «disabled = {условие}» не рекомендуется.Это потому, что список создается динамически, в котором N элементов.Если вы используете метод ('disabled = {условие}'), мне понадобится номер переменной состояния N для отслеживания каждой и всех кнопок удаления.

<List>
{ items.map( item => 
   <ListItem>
      <ListItemText
          primary="Single-line item"
          secondary={secondary ? 'Secondary text' : null}
       />
   <ListItemSecondaryAction>
       <IconButton aria-label="Delete">
           <DeleteIcon />
       </IconButton>
   </ListItemSecondaryAction>
  </ListItem>
  )
}
</List>

Answer 1

Вы можете использовать что-то вроде этого, например:

let button_variables = [
{
    label:"save_btn",
    isDisabled : false
},
{
   label:"cancel_btn",
   isDisabled : true
}
]

and then u can map those to the buttons something like below ,

button_variables.map(function (data, index) {
  <button disabled={data.isDisabled}> {data.label} </button>
});

Note :  If disabled didnt worked means, u can change className dynamically instead of that .
Ex : 
className = {data.isDisabled ? activeClass : disabledClass}