8

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

1
  • 1
    I think this is the versioning issue. because Hooks are currently in React v16.7.0-alpha and being discussed in an open RFC reactjs.org/docs/hooks-intro.html and you are using React 16.6.0 in you sandbox. Commented Nov 1, 2018 at 13:52

1 Answer 1

7

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.