-1

I have a React component that is using a map function to show some data. The problem is when I'm passing the callback function to and using the classes property, I'm getting an error that says

Uncaught ReferenceError: classes is not defined

Here's my code. Please note that classes is defined. How do I properly access it on the callback function that I have?

class ProvidersPage extends React.Component {
  constructor(props, context) {
    super(props, context);
  }

  providerRow(provider, index) {
    return <TableRow className={classes.row} key={index}>
      <CustomTableCell component="th" scope="row">
        {provider.name}
      </CustomTableCell>
      <CustomTableCell>{provider.type}</CustomTableCell>
      <CustomTableCell>{provider.pointOfContact}</CustomTableCell>
      <CustomTableCell>{provider.telephoneNumber}</CustomTableCell>
      <CustomTableCell>{provider.licenseNumber}</CustomTableCell>
      <CustomTableCell>{provider.licenseSource}</CustomTableCell>
      <CustomTableCell>
        <IconButton>
          <MoreHorizIcon />
        </IconButton>
      </CustomTableCell>
    </TableRow>
  }

  render() {
    const { classes } = this.props;

    return (
      <div>
        <Paper className={classes.root} elevation={4}>
          <Table className={classes.table}>
            <TableHead>
              <TableRow>
                <CustomTableCell>Name</CustomTableCell>
                <CustomTableCell>Type</CustomTableCell>
                <CustomTableCell>Point of Contact</CustomTableCell>
                <CustomTableCell>Telephone Number</CustomTableCell>
                <CustomTableCell>License Number</CustomTableCell>
                <CustomTableCell>License Source</CustomTableCell>
                <CustomTableCell>Actions</CustomTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {this.props.providers.map(this.providerRow)}
            </TableBody>            
          </Table>
        </Paper>
      </div>
    );
  }
}
David S. Moore
  • 11
  • 3
  • change on providerRow: `className={this.props.classes.row} ` – nirsky Jun 10 '18 at 15:31
  • @nirsky if he/she does it that way he/she also needs `map(this.providerRow, this)`. – ASDFGerte Jun 10 '18 at 15:34
  • Hello @nirsky, did that but the error that is showing now says Uncaught TypeError: Cannot read property 'props' of undefined. – David S. Moore Jun 10 '18 at 15:34
  • add to your constructor: `this.providerRow = this.providerRow.bind(this)` – nirsky Jun 10 '18 at 15:35
  • @ASDFGerte Thank you. That worked. Are there any articles that you would suggest for someone to get familiarize with the this keyword in this type of problems? – David S. Moore Jun 10 '18 at 15:36
  • @nirsky Thanks that worked as well. I believe this is the recommended way of doing it for performance issues when rendering. – David S. Moore Jun 10 '18 at 15:38
  • I am not saying that is the best way to do it, i just added that to the given suggestion because it would not work otherwise (and does not alter properties that may cause other sideeffects). The later suggestion of using `bind` is a frequently seen pattern, depending on the situation it may be preferrable. There are lots of pages about `this`, off the top of my head, [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this), [question frequently used to link duplicates to](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) – ASDFGerte Jun 10 '18 at 15:41

1 Answers1

0

You have to pass classes variable to the callback function to pass it as parameter.

this.props.providers.map(this.providerRow.bind(this, classes))

And the providerRow function prototype would be:

providerRow(classes, provider, index)

Or you have classes in your props also, so you have to write this line to start of providerRow function:

const { classes } = this.props;
Hriday Modi
  • 1,503
  • 11
  • 21