Material UI / React - withStyles() Error Message

Material UI / React - withStyles() Error Message
0

I’ve trying to apply my variable styles with this: withStyles() component.

But I keep getting this error:

  Line 64:16:  'withStyles' is not defined  no-undef

Anybody know what the problem might be?

Here is the code for my random quote machine.

import React from 'react';
import 'typeface-roboto';
import Grid from '@material-ui/core/grid';
import QuoteGenerator from './components/QuoteGenerator';

const styles = {
  container: {
    alignItems: "center"
  }
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quotes: [],
      selectedQuoteIndex: null
    }
    //if a function uses this. -> we need to bind here to the construtor 
    this.selectQuoteIndex = this.generateNewQuoteIndex.bind(this);
    this.assignNewQuoteIndex = this.assignNewQuoteIndex.bind(this);
  }
  // ###PROPS###
  // set state needs to been done on a single line as this function is asynchronous
  componentDidMount() {
    fetch('https://gist.githubusercontent.com/natebass/b0a548425a73bdf8ea5c618149fe1fce/raw/f4231cd5961f026264bb6bb3a6c41671b044f1f4/quotes.json')
      .then(data => data.json())
      .then(quotes => this.setState({ quotes }, this.assignNewQuoteIndex)); //quotes:quotes object array 
  }

  get selectedQuote() { // can call this function as if it were a variable
    if (!this.state.quotes.length || !Number.isInteger(this.state.selectedQuoteIndex)) {
      // eslint-disable-next-line
      return; //undefined
    }
    return this.state.quotes[this.state.selectedQuoteIndex];
  } //returning the quote at the desired index
  /** 
  * Returns an integer representing an index in state.quotes
  **/
  generateNewQuoteIndex() {
    if (!this.state.quotes.length) {
      return; // undefined
    }
    return Math.floor(Math.random() * this.state.quotes.length - 1) + 1;
  }

  assignNewQuoteIndex() {
    this.setState({ selectedQuoteIndex: this.generateNewQuoteIndex() });
  }

  // render is run once state is updated
  render() {
    return (
      <Grid id="quote-box" justify="center" container>
        <Grid item>
          <QuoteGenerator selectedQuote={this.selectedQuote} assignNewQuoteIndex={this.assignNewQuoteIndex} />
        </Grid>
      </Grid>
    );
  }
}

export default withStyles(styles)(App);

The problem is that you have not defined a function named withStyles. If withStyles is in another file, then you must import it to use it.

I think you are missing the following import:

import { withStyles } from '@material-ui/core/styles';

Thanks Randell!
I imported withStyles as well as added className to Grid.
Everything is working now :slight_smile:

      <Grid className={this.props.classes.container} id="quote-box" justify="center" container>