Please help me with this error.

I am getting this Object(...) is not a function error in my code.

Here is my code.
I believe it has something to do with the const useStyles I am using at line number 12 (const useStyles = makeStyles(() => ({...) but I am not sure.

Below is my code for a review.I am getting this Object(...) is not a function error in my code.

import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(() => ({
  formControl: {
    "& .MuiInputBase-root": {
      color: "#6EC177",
      borderColor: "red",
      borderWidth: "1px",
      borderStyle: "solid",
      borderRadius: "100px",
      minWidth: "120px",
      justifyContent: "center",
    },
    "& .MuiSelect-select.MuiSelect-select": {
      paddingRight: "5px",
    },
  },
  select: {
    width: "auto",
    fontSize: "12px",
    "&:focus": {
      backgroundColor: "transparent",
    },
  },
  selectIcon: {
    position: "relative",
    color: "#6EC177",
    fontSize: "19px",
  },
  paper: {
    borderRadius: 10,
    marginTop: 8,
  },
  list: {
    paddingTop: 0,
    paddingBottom: 0,
    "& li": {
      fontWeight: 200,
      paddingTop: 8,
      paddingBottom: 8,
      fontSize: "12px",
    },
    "& li.Mui-selected": {
      color: "white",
      background: "#6EC177",
    },
    "& li.Mui-selected:hover": {
      background: "#6EC177",
    },
  },
}));

class VoiceCallComponent extends React.Component {
  constructor(props) {
    super(props);

    console.log("Connector: --- VoiceCallComponent setting state ---");

    this.state = {
      functionsBaseUrl: this.props.functionsBaseUrl,
      settingsBaseUrl: this.props.settingsBaseUrl,
      selection: 1,
    };
    console.log("----this.state----", this.state);
    console.log(
      "Connector: --- VoiceCallComponent setting variables/binding ---"
    );
    this.setRegarding = this.setRegarding.bind(this);
    this.regardingResult = this.regardingResult.bind(this);
    console.log("Connector: --- VoiceCallComponent calling init() ---");
    this.init();
  }

  init = () => {
    console.log(
      `Connector: -- VoiceCallComponent -- functionsBaseUrl: ${this.state.functionsBaseUrl} -- settingsBaseUrl: ${this.state.settingsBaseUrl}`
    );
  };

render() {
    console.log("Connector: ====== render ========");
    const { task } = this.props;
    return (
      <div >
        <span  />
        <h1>Notes:</h1>
        <ul>
          <p style={{ marginTop: "5px" }}></p>
          <FormControl fullWidth>
            <InputLabel id="disposition-label">Disposition*:</InputLabel>
            <Select
              value={this.state.calldisposition}
              id="disposition-label"
              onChange={(event) => {
                this.setState({ calldisposition: event.target.value });
                this.props.task.attributes.calldisposition = event.target.value;
                this.props.task.setAttributes(this.props.task.attributes);
              }}
              classes={{
                select: useStyles.select,
              }}
            >
              <MenuItem value="">--Select--</MenuItem>
              <MenuItem value="214680006">Contacted</MenuItem>
              <MenuItem value="214680000">Bad Number</MenuItem>
              <MenuItem value="214680001">Hung up on Call</MenuItem>
            </Select>
          </FormControl>
          <p style={{ marginTop: "8px" }}></p>
          <button
            id="btnRegarding"
            style={{ width: "80px" }}
            onClick={this.setRegarding}
          >
            Regarding
          </button>
          <p style={{ marginTop: "6px" }}></p>
          <span
            id="associationname"
            style={{ fontWeight: "400", fontSize: "small" }}
          >
            {this.props.task.attributes.regardingName}
          </span>
          <br></br>
        </ul>
      </div>
    );
  }
}
VoiceCallComponent.propTypes = {
  notificationHandler: React.PropTypes.func,
};
export default withTaskContext(VoiceCallComponent);

Should I define useStyles somewhere else to get rid of this error??

CodePudding user response：

I guess there could be two different problems:

• you're not exporting the class;
• the makeStyle import may not be correct (for more info try giving a look here https://mui.com/system/styles/basics/)

CodePudding user response：

Export the class at the end of your code

export class VoiceCallComponent

Also import the makeStyles() hook from Material-ui