Реакция ES6 Super Expression

Question

У меня возникла проблема с реактивными компонентами и реквизитами. Ниже приведено исключение. Что я делаю неправильно?

Uncaught TypeError: Супер выражение должно быть либо нулевым, либо функцией, а не неопределенного

class Component extends React.component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     name: '' 
    } 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(event) { 
    this.setState({ 
     name: event.target.value 
    }); 
    } 

    render() { 
    return (
     <div> 
     <input type="text" onChange={this.handleChange} /> 
     <p>{this.state.name}</p> 
     </div> 
    ) 
    } 
}; 

ReactDOM.render(
    <Component />, 
    document.getElementById('reactContainer') 
) 

Codepen link

Answer 1

Проблема в этой строке:

class Component extends React.component { 

вы использовали небольшую c в React.component вместо этого используют C:

class Component extends React.Component { 

Проверьте рабочий код:

class Component extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     name: '' 
 
    } 
 
    this.handleChange = this.handleChange.bind(this); 
 
    } 
 

 
    handleChange(event) { 
 
    this.setState({ 
 
     name: event.target.value 
 
    }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <input type="text" onChange={this.handleChange} /> 
 
     <p>{this.state.name}</p> 
 
     </div> 
 
    ) 
 
    } 
 
}; 
 

 
ReactDOM.render(
 
    <Component />, 
 
    document.getElementById('reactContainer') 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 

 
<div id='reactContainer'></div>