CODEWITHSUNDEEP
javascripthtmlreactjs
Ian Springer
Ian Springer

Reputation: 233

React.js Expected onSubmit listener to be a function, instead got type boolean

Can someone please tell me what the hell I am doing wrong here? I am pretty new to React, and everything I have read says that this should work. I am trying to call the function "addItem" when the form is submitted, however the console.log throws the error "Expected onSubmit listener to be a function, instead got type boolean" on page load. Thanks! 

import React, { Component } from 'react';
import App from "./App"
import List from "./List"


class AddTodo extends Component{
  constructor(){
    super();
    this.state = {
      items: []
    }
  }
  addItem(e){
    var itemArray = this.state.items;
    itemArray.push({
      text: this._inputElement.value,
      key: Date.now()
    })
    this.setState({
      items: itemArray
    })
    this._inputElement.value = "";
    console.log(itemArray)
    e.preventDefault()
  }
  render(){
      return(
        <div className="box-wrapper">
          <form onSubmit={this.addItem.bind(this)}>
            <input href={(a) => this._inputElement = a} placeholder={this.props.placeHolder} type="text"></input>
            <button type="submit">Submit</button>
          </form>
          <List entries={this.state.items} />
        </div>
      )
  }
}

export default AddTodo;

Upvotes: 2

Views: 6486

Answers (3)

Goutham
Goutham

Reputation: 362

First have to remove event.preventDefault .It is restricting the default behaviour of the webpage.Add a onClick event listener to the submit so that the function executes on button click.

`import React, { Component } from 'react';
import App from "./App"
import List from "./List"


class AddTodo extends Component{
  constructor(){
    super();
    this.state = {
      items: []
    }
  }
  addItem(e){
    var itemArray = this.state.items;
    itemArray.push({
      text: this._inputElement.value,
      key: Date.now()
    })
    this.setState({
      items: itemArray
    })
    this._inputElement.value = "";
    console.log(itemArray)
   //  e.preventDefault(); remove this prevent default
  }
  render(){
      return(
        <div className="box-wrapper">
          <form onSubmit={this.addItem.bind(this)}>
            <input href={(a) => this._inputElement = a} placeholder={this.props.placeHolder} type="text"></input>
            <button type="submit" onClick={this.addItem.bind(this)}>Submit</button>
          </form>
          <List entries={this.state.items} />
        </div>
      )
  }
}

export default AddTodo;`

Upvotes: 1

Gokulakrishnan Kalaikovan
Gokulakrishnan Kalaikovan

Reputation: 33

I am not getting any error. But you should put the preventDefault at the top of the addItem, this will prevent from page reload. There is better way to handle the input value by assigning ref attribute to input and accessing via this.refs.refName.

addItem(e) {
  e.preventDefault(); //To prevent the page reload on submit

  var itemArray = this.state.items;

  itemArray.push({
    text: this.refs.inputElement.value
  });

  this.refs.inputElement.value = ""; // clearing the value
}

render() {
  return( 
    <div>
      <form onSubmit={this.addItem.bind(this)} >
        <input ref="inputElement" placeholder={this.props.placeHolder} type="text"/>
        <button type="submit">Submit</button> 
      </form>
      {
        this.state.itemArray.map((item) => {
          return(<span>{item}</span>)
        })
      }
    </div>
  );
}

Upvotes: 0

Jordan Bonitatis
Jordan Bonitatis

Reputation: 1547

Try changing your render and addItem to something like this:

  addItem(e){
    e.preventDefault();
    {/* add the rest of the function here */}
  }
  render(){
    return(
      <div className="box-wrapper">
        <form onSubmit={this.addItem.bind(this)}>
          <input
            href={(a) => this._inputElement = a}
            placeholder={this.props.placeHolder}
            type="text"
          />
          <button type="submit" onClick={this.addItem.bind(this)}>Submit</button>
        </form>
        <List entries={this.state.items} />
      </div>
  )

}

I made two important changes:

  1. Added e.preventDefault(); to the addItem method, which will prevent default behavior.

  2. Added an onClick handler to the "submit" button, with the addItem method passed in as the target executable.

Upvotes: 3

Related Questions