CODEWITHSUNDEEP
reactjsreact-componentreact-hooks
Mahmudul Haque
Mahmudul Haque

Reputation: 532

TypeError: Object(...) is not a function React

I'm learning React from this channel. Recently, I stumbled upon React Hooks from here. So, I tried to convert a class based component to hook based. Here is my class based component: 

import React, { Component } from 'react';

class AddNinja extends Component {
    state = {
        name: null,
        age: null,
        skill: null,
    }
    handleChange = e => {
        this.setState({
            [e.target.id]: e.target.value,
        })
    }
    handleSubmit = e => {
        e.preventDefault();
        this.props.addNinja(this.state);
    }
    render() {
        return (
            <div>
                <form onSubmit={ this.handleSubmit }>
                    <label htmlFor="name">Name: </label>
                    <input type="text" id="name" onChange={ this.handleChange } />

                    <label htmlFor="age">Age: </label>
                    <input type="number" id="age" onChange={ this.handleChange } />

                    <label htmlFor="skill">Skill: </label>
                    <input type="text" id="skill" onChange={ this.handleChange } />

                    <button>Submit</button>
                </form>
            </div>
        )
    }
}

Here is my converted component: https://codesandbox.io/s/n0lw4wo550?module=%2Fsrc%2FAddNinja.js

But I'm getting following error:

enter image description here

Upvotes: 8

Views: 13502

Answers (1)

Murli Prajapati
Murli Prajapati

Reputation: 9733

React hooks are available in React v16.8.0. updated your react and react dom version to 16.8.0. 

"react": "16.8.0",
"react-dom": "16.8.0",

Here is your code with updated verion:https://codesandbox.io/s/qq90900xr4

Upvotes: 8

Related Questions