Объединить состояние с идентификатором | ReactJS

Question

У меня есть несколько флажков, когда я нажимаю на флажок «Выбрать все / Нет», он работает, все флажки отмечены, но я хочу иметь возможность установить каждый флажок один за другим. Моя проблема в том, что они все используют одно и то же состояние. Поэтому, если я нажимаю на флажок, чтобы проверить только этот, он проверяет все остальные.

Поэтому мой вопрос: можно ли объединить идентификатор в состояние?

Там мои состояния:

isAllTablesChecked: false,
isAllReportsChecked: false,
isTableChecked: false,
isReportChecked: false,
tables: [
         {id: 1, name: 'Accounts'},
         {id: 2, name: 'Asset Types'},
         {id: 3, name: 'Assets'},
         {id: 4, name: 'Bank Transactions'}
        ],
report: [
         {id: 5, name: 'Aged Payables by Contact'},
         {id: 6, name: 'Aged Receivables by Contact'},
         {id: 7, name: 'Balance Sheet'},
         {id: 8, name: 'Bank Statement'}
        ]

На карте ниже:

const tables = this.state.tables.map(table =>
      <div>
        <Input
         type="checkbox"
         name={table.name}
         id={this.state.isTableChecked}
         checked={this.state.isTableChecked}
         onClick={this.checkTables}
        />
        <b> {table.name} </b>
      </div>
    )

    const reports = this.state.reports.map(report =>
      <div>
        <Input
         type="checkbox"
         name={report.name}
         id={this.state.isReportChecked}
         checked={this.state.isReportChecked}
         onClick={this.checkReports}
        />
        <b> {report.name} </b>
      </div>
    )

Для строки идентификатора в теге <Input> возможно ли сделать что-то вроде:

id={this.state.isTableChecked+tables.id}

Спасибо за вашу помощь.

Answer 1

Я нашел решение своей проблемы.

Как я уже сказал в своем ответе Джереми Харрису, я использовал свойство checked внутри данных JSON моего массива состояний.

Вот ссылка на решение, оно сработало для меня: https://medium.com/@tariqul.islam.rony / множественные флажки-обработка-по-реакции- js -84b1d49a46c6

Надеюсь, что это поможет вам, Я поставлю эту топи c как решено.