React fragment should't include

Hi guys. I updated my app and catch error which didn’t appear in the past.

Updated from “react-table”: “^7.0.0-rc.15”, to “react-table”: “version”: “7.0.0”

The table uses code from the table expanded example in your’s page

<tbody {...getTableBodyProps()}>
                {rows.map((row, i) => {
                  prepareRow(row)
                  return (
                    <React.Fragment {...row.getRowProps()}>
                      <tr className={row.isExpanded ? styles.selectedRow : null}>
                        {row.cells.map((cell, index) => {
                          return (
                            <td key={index} className={cell.column.className} {...cell.getCellProps()}>{cell.render('Cell')}</td>
                          )
                        })}
                      </tr>
                      {/*
                          If the row is in an expanded state, render a row with a
                          column that fills the entire length of the table.
                        */}
                      {row.isExpanded ? (
                        <tr {...row.getRowProps()}>
                          <td colSpan={visibleColumns.length}>
                            {renderRowSubComponent(row)}
                          </td>
                        </tr>
                      ) : null}
                    </React.Fragment>
                  )
                })}
              </tbody>

The error I catch is “Warning: Invalid prop role supplied to React.Fragment. React.Fragment can only have key and children props.”

[adrenalin8231]

Dear future me (and everyone struggling like me),

Another example already have dealt this issue:

// L143-148
          prepareRow(row);
          const rowProps = row.getRowProps();
          return (
            // Use a React.Fragment here so the table markup is still valid
            <React.Fragment key={rowProps.key}>
              <tr {...rowProps}>

or you can just fix L77 of our example appropriately.

// L77, as-is
              <React.Fragment {...row.getRowProps()}>

// L77, to-be
              <React.Fragment key={row.getRowProps().key}>

Stay safe!

[hungdev]

@adrenalin8231,thank you, it worked. But dont forget remove {...row.getRowProps()}