My onchange method is not working in react

Question

import React, { Component } from 'react';
import TaskBar from './Task';

class Todo extends Component {
    state = {
        todo: ''
    }

    changeHandler = (event) => {
        console.log(event.target.value);

    }

    render() {
        return (
            <React.Fragment>
                <div className="card">
                    <h5 className="card-header">Todo</h5>
                    <div className="card-body">
                        <h5 className="card-title">Task you want to do</h5>
                            <form>
                                <input type="text" className="form-control" value={this.state.todo} name="todo" onChange={(event) => this.changeHandler(event)} />
                            </form>
                    </div>
                    <button className="btn btn-primary">Go somewhere</button>  
               </div>   
            </React.Fragment>

                    )
    }

                }

export default Todo;

In the above code i don't know why i couldn't make any change

2) I am using Bootstrap cdn in my public folder and i am using these classes here

I don't get your question. What's not working exactly? Your console.log inside onchange? or the input value of your input box? — Atin Singh, Oct 19 '19 at 12:59

score 4 · Accepted Answer · answered Oct 19 '19 at 13:02

You forgot to set state inside your onchange handler.

import React, { Component } from 'react';
import TaskBar from './Task';

class Todo extends Component {
    state = {
        todo: ''
    }

    changeHandler = (event) => {
        console.log(event.target.value);
        this.setState({todo: event.target.value}) //you forgot to do this//
    }

    render() {
        return (
            <React.Fragment>
                <div className="card">
                    <h5 className="card-header">Todo</h5>
                    <div className="card-body">
                        <h5 className="card-title">Task you want to do</h5>
                            <form>
                                <input type="text" className="form-control" value={this.state.todo} name="todo" onChange={(event) => this.changeHandler(event)} />
                            </form>
                    </div>
                    <button className="btn btn-primary">Go somewhere</button>  
               </div>   
            </React.Fragment>

                    )
    }

                }

export default Todo;

Link to a codesandbox example - https://codesandbox.io/s/jydjj?module=/example.js

Also currently your onchange uses an arrow function which creates a new function on every hit which is considered bad practice so i would suggest you to do this instead.

<input type="text" className="form-control" value={this.state.todo} name="todo" onChange={this.changeHandler} />

I think OP is saying that he isn't even to get anything in the log `console.log(event.target.value);` (not sure). also, are you sure that this valid? `onChange={(event) => this.changeHandler(event)}`? — Alwaysblue, Oct 19 '19 at 13:05
@iRohitBhatia yeah it works. Check out the codesandbox. It's a bad practice as it always creates a new function see this for explanation https://stackoverflow.com/questions/29810914/react-js-onclick-cant-pass-value-to-method. But this way of using an arrow function is one of the ways you can pass parameters to your click handler. — Atin Singh, Oct 19 '19 at 13:07

My onchange method is not working in react

1 Answers1