lundi 2 mars 2020

Concatenate a state with an id | ReactJS

I have multiple checkboxes, when I click on a "Select All/None" checkbox, it works, all the checkboxes are checked, but I want to be able to check each checkbox one by one. My problem is that they all use the same state. So if I click on a checkbox to only check this one, it is checking all the other ones.

So my question is : Is it possible to concatenate an id to a state ?

There are my states :

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'}
        ]

In a map, below :

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>
    )

For the id line in the <Input> tag, is it possible to do something like :

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

Thanks for your help.




Aucun commentaire:

Enregistrer un commentaire