TypeError: Super expression must be null error in React application

react

#1

I’m new to working with react so forgive me if this looks poorly cobbled together.

I have a component called “Page” that implements a couple of child components. In App.js, I attempt to render the page component (right now just with test data). Here is the requisite code

Page.js
import React from ‘react’;
import {DropdownButton, MenuItem} from ‘react-bootstrap’;

export default class Page extends React.Component() {
render(props){
return(
<div className="page">
    <DropdownButton className="year" bsStyle="year" title="1781" key="1781" id="dropdown-year-1781">
        <MenuItem eventKey="1778">1778</MenuItem>
        <MenuItem eventKey="1779">1779</MenuItem>
        <MenuItem eventKey="1780">1780</MenuItem>
        <MenuItem eventKey="1781">1781</MenuItem>
    </DropdownButton>
    
    <DropdownButton className="month" bsStyle="month" title="January" key="1" id="dropdown-month-1">
        <MenuItem eventKey="1">January</MenuItem>
        <MenuItem eventKey="2">February</MenuItem>
        <MenuItem eventKey="3">March</MenuItem>
        <MenuItem eventKey="4">April</MenuItem>
        <MenuItem eventKey="5">May</MenuItem>
        <MenuItem eventKey="6">June</MenuItem>
        <MenuItem eventKey="7">July</MenuItem>
        <MenuItem eventKey="8">August</MenuItem>
        <MenuItem eventKey="9">September</MenuItem>
        <MenuItem eventKey="10">October</MenuItem>
        <MenuItem eventKey="11">November</MenuItem>
        <MenuItem eventKey="12">December</MenuItem>
    </DropdownButton>
    
    <hr/>
    
    <Expenditure title="Royal Irish College of this City of Alcala de Henares" type="Ordinary Expenses" description="Ordinary Expenses for the Month of January seventeen eighty-one, in which there were the Rector, eight Scholars, and two Servants, who at the daily ratio of one Pound of Bread, another pound of Meat, on the days it is allowed, and twelve cuartos instead of the Meat on Abstinence Days which have been four in this month with half an azumbre of wine for each of the aforesaid, amount to the following Items, and sums">
        <ul className="entry">
            <li>
                <Entry type="default" description="Bread for same is three hundred and forty-one pounds at six cuartos amounts to" reales="240" maravedises="24" />
            </li>
            <li>
                <Entry type="default" description="Meat for same is two hundred and ninety-seven Pounds, at fourteen cuartos amounts to" reales="489" maravedises="6" />
            </li>
            <li>
                <Entry type="default" description="Wine for same is eighteen arrobas, and thirty-four cuartillos, at thirteen reales four maravedíes each arroba" reales="248" maravedises="14" />
            </li>
        </ul>
    </Expenditure>
</div>
)
}
}

export class Expenditure extends React.Component() {
render() {
return(
<div className="expenditure">
    <label className="type">{this.props.type}</label>
    <label className="title">{this.props.title}</label>
    <label className="text">{this.props.description}</label>
</div>
)
}
}

export class Entry extends React.Component() {
constructor(props) {
super(props);
this.entryclass = "entry " + props.type;
this.description = props.description;
this.reales = props.reales;
this.maradevises = props.maradevises;
}
render() {
return(
<div className={this.entryclass}>
    <label className="text">{this.description}</label>
    <ul className="amount">
        <li className="reales">{this.reales}</li>
        <li className="maravedises">{this.maravedises}</li>
    </ul>
</div>
)
}
}

App.js
import React, { Component } from ‘react’;
import Page from ‘./Page’
import logo from ‘./logo.svg’;
import ‘./App.css’;

class App extends Component {
render() {
return (
<div className="App">
    <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
    </header>
    <p className="App-intro">
        To get started, edit <code>src/App.js</code> and save to reload.
    </p>
    <Page pageid="f001-01" year="1781" month="1" />
</div>
);
}
}

export default App;

Everything compiles fine but when I run the application, I get the following error:

TypeError: Super expression must either be null or a function, not undefined

It says the error is in Page.js on line 4 which is:

export default class Page extends React.Component() {

I’m sure I’ve made some small, stupid mistake but as I’m not very familiar with the react framework, I can’t find the problem. Could someone clue me in?

Thanks!


#2

Hi,

I think the solution to your problem is just that you need

export default class Page extends React.Component {

without the brackets after React.Component.

This is in line with the first example here: https://reactjs.org/docs/react-component.html


#3

Thanks! That fixed the problem!