React JS: Import Class Component

Question

I have written up a component in React that I want to add to my "App.js" file, but I am unable to do so. The component was written as a class, with the following code:

import React from 'react';
class TempsAndTime extends React.component {
    constructor (props) {
        super(props);
        this.state = {bedTemp:props.bedTemp}
    }

    render() {
        const [progress, setProgress] = React.useState(30);
        const classes = useStyles();
        return (
            <div className={classes.container} >
                <div className={classes.timeContainer} >
                    <Typography className={classes.timeElapsed}>
                        Time elapsed
                    </Typography>
                </div>
            </div>
        );
    }
};
export default TempsAndTime

In my App.js, I tried to import it in the following way:

import TempsAndTime from './components/TempsAndTime';

But I ended up getting the following error:

TypeError: Super expression must either be null or a function

Any ideas?

Answer 1

There's a typo in your code:

When you are declaring the class TempsAndTime, there's a typo when you're extending "React.component". It should be React.Component , cuz Component is a class offered by React and should start with a capital letter.