Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TypeError: Class extends value undefined is not a constructor or null in react js

I am a beginner in react and I am playing with an example in https://jscomplete.com/repl.

So far my code looks like :

let data = [
    {
    name:"Paul O’Shannessy",
    avatar_url:"https://avatars1.githubusercontent.com/u/8445?v=4",
        company_name:"Facebook"
  },
  {
    name:"Tom Preston-Werner",
    avatar_url:"https://avatars0.githubusercontent.com/u/1?v=4",
        company_name:"Facebook"  
  }
];

const Card = (props) => {
    return (
    <div style={{margin:'1em'}}>
        <img width="75" src={props.avatar_url} />
      <div className="info" style={{display: 'inline-block',marginLeft: 10}}>
        <div style={{fontSize: '1.25em',fontWeight: 'bold'}}>{props.name}</div>
        <div>{props.company_name}</div>
      </div>
    </div>
  );
}

const CardList = (props) => {
    return (
    <div>
        {props.cards.map((card) => <Card {...card}/>)}
    </div>
  );
}

class Form extends React.component {
    render() {
    return (
        <form>
        <input type="text" placeholder="Github Username" />
        <button type="submit">Add Card</button>
      </form>
    );
  };
}

class App extends React.component {
    render() {
    return (
        <div>
        <Form />
        <CardList cards={data} />
      </div>
    );
  };
}

ReactDOM.render(<App />,mountNode);

But each time I run, I keep getting this runtime error. What am I doing wrong?

like image 917
StrugglingCoder Avatar asked Feb 26 '18 09:02

StrugglingCoder


2 Answers

when you import React then try React.Component and never use React.Component(). Remove these parentheses, then this error will go.

import React from 'react';
......
class App extends React.Component {
}

or you can try this.

import React, {Component} from 'react';
......
class App extends Component {
like image 177
hemant rao Avatar answered Oct 09 '22 18:10

hemant rao


Should be React.Component instead of React.component

Notice the capital letter.

like image 26
Łukasz Żarczyński Avatar answered Oct 09 '22 17:10

Łukasz Żarczyński