Not able to display data using setState in material-ui table --reactjs

Question

I am using setState method of react to setState in cells of table. But values of state is not getting displayed in the cells.

class SimpleTable extends React.Component {
  state = {
    userName: 'abc',
    firstName: 'edb',
    lastName: 'something'
  };

  render(){ 
  return (
    <Paper >
      <Table >
        <TableHead>
          <TableRow>
            <TableCell>UserName</TableCell>
            <TableCell align="right">FirstName</TableCell>
            <TableCell align="right">LastName</TableCell>
            </TableRow>
        </TableHead>
        <TableBody>
            <TableRow>                        
              <TableCell align="right">{this.setState.userName}</TableCell>
              <TableCell align="right">{this.setState.firstName}</TableCell>
              <TableCell align="right">{this.setState.lastName}</TableCell>                     

            </TableRow>        
        </TableBody>
      </Table>
    </Paper>
  );
}
}

Answer 1

Use this.state.username instead of this.setState.username.

setState is a function to set state values and we can use this.state to access state properties. See difference between these two for more clarification here

Hope that helps!!!!