How to create variables for each row in a React table?

Question

I am rendering a dynamic table in react like this:

    <TableBody>
      {finalLoadedTokensData.map((loadedToken, index) => {
        const isItemSelected = isSelected(loadedToken.contract);
        const labelId = `enhanced-table-checkbox-${index}`;

        return(
          <TableRow
            hover
            key={loadedToken.id}
            selected={isItemSelected}
            sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
          >
            <TableCell padding="checkbox">
              <Checkbox
                color="primary"
                checked={isItemSelected}
                inputProps={{
                  'aria-labelledby': labelId,
                }}
                disabled={false}
                onClick={(event) => handleClick(event, loadedToken.contract, loadedToken.type, parseInt(loadedToken.tokenId) || "-", loadedToken.quantity)}
              />
            </TableCell>
            <TableCell align="center">{loadedToken.type}</TableCell>
            <TableCell align="center">{loadedToken.contract}</TableCell>
            <TableCell align="center">{loadedToken.tokenId}</TableCell>
            <TableCell align="center">{loadedToken.quantity}</TableCell>
            <TableCell align="center">{loadedToken.lockedQuantity}</TableCell>
            <TableCell>
              <DateTimePicker
                minDate={moment().toDate()}
                value={dateValue}
              />
            </TableCell>
            <TableCell align="center">
              <Button 
                disabled={!isItemSelected} 
                color="primary" 
                variant="contained" 
                onClick={async () => {                        
                  await lockToken(selected, props.smartNftId, 1679823611)
                }}
              >
                Lock
              </Button>
            </TableCell>
          </TableRow>
        )})}
    </TableBody>

If I create a variable like the one I have (dateValue) and I handle its state with a useState, I am only managing one variable for all the possible rows I have. What I need is to be able to create a value for the DateTimePicker component but for each one of the rows.

How can I do that?

Mahesh Samudra · Accepted Answer · 2023-03-28 09:04:11Z

1

You can try to store the dateValue values in an array:

const [dateValues, setDateValues] = useState([])

And then in the table:

    <TableBody>
      {finalLoadedTokensData.map((loadedToken, index) => {
        const isItemSelected = isSelected(loadedToken.contract);
        const labelId = `enhanced-table-checkbox-${index}`;

        return(
          <TableRow
            key={loadedToken.id}
            selected={isItemSelected}
          >
        
            <TableCell>
              <DateTimePicker
                minDate={moment().toDate()}
                value={dateValues?.[index] || null}
                setValue={value => {
                  let newValues = [...dateValues];
                  newValues[index] = value;
                  setDateValues(newValues);
                }}
              />
            </TableCell>
          </TableRow>
        )})}
    </TableBody>

edited Mar 28, 2023 at 9:04

answered Mar 26, 2023 at 12:11

Mahesh Samudra

1,2382 gold badges13 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Falcon Stakepool Over a year ago

And if I want to update the variables onChange, should I use the setter for the array there?

Mahesh Samudra Over a year ago

Yes. I'll update the answer.

Falcon Stakepool Over a year ago

Sorry but it does not work, I am getting undefined when I console.log the value of the DateTimePicker component.

Mahesh Samudra Over a year ago

There was a typo and an error in the setter. Updated the answer. Working codesandbox here: codesandbox.io/s/hopeful-dhawan-dn4d9p?file=/src/App.js:595-719

Collectives™ on Stack Overflow

How to create variables for each row in a React table?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related