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?
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 {
Should be React.Component
instead of React.component
Notice the capital letter.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With