Help with React forms

JavaScript
#1

I need heeeeeelp. I’m fairly new to React. I’m trying to make it so that the user submits input and when enter is hit, it displays that information. I’ve tried a billion things and I’m just kind of lost. In the handleSubmit() method, if I place the event.preventDefault() before what I want the code to do, nothing happens upon hitting enter/hitting submit. If I put it after, the page just refreshes back to the original. I’ve googled and googled and I just feel lost. Any help is appreciated. Thanks. My code (it’s not perfect, and right now I’m just trying to get this one thing to work before working on other things/the styling):

let React = require('react');
let ReactDOM = require('react-dom');





class AddItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentItem: '',
      items: []
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(e) {
    this.setState({
      currentItem: e.target.value
    })
  }



  handleSubmit(event) {
    event.preventDefault();
    return <h1>{this.state.currentItem}</h1>;
  }



  render() {

      return (
        <form onSubmit={this.handleSubmit}>
        <input className="add-item" type="text" onChange={this.handleChange} value={this.state.handleChange} id="list-title" maxLength="20" />
        <input type="submit" name="Submit" />
        </form>
      )
    }
  }

module.exports = AddItem;
#2

I don’t understand why you want to return an h1 from a submit event. Care to explain your thought process?

Anyway if you want to print in an h1 only after an event, you can simply link its visibility to a state variable.
In this case I’m adding a isVisible boolean to the component state to decide weather or not render the h1.

// add a visibility boolean in your state:
this.state = {
  currentItem: '',
  isVisible: false,
}

// on submit update the visibility
handleSubmit(event) {
    event.preventDefault();
    this.setState({
      isVisible: !this.state.isVisible
  })
}


// then render the h1 only if visible is true
return(
  <form>[...]</form>
  {this.state.isVisible &&
     <h1>{this.state.currentItem}</h1>
  }
)

More about conditional rendering with logical && operation on the official react docs.

#3

It’s a grocery list, so every time something is added to the list via input from the user, I want it to be displayed.
It also probably won’t be an <h1> eventually, right now I just wanted it to actually display and then move on from there.

#4

In my opinion then onSubmit you update a list of all the grocery a user is selecting, then print those out:

this.state = {
  grocery: [],
}

// add into grocery
onSubmit() {
 this.setState({ grocery: [ ...this.state.grocery, myNewItem] })
}


// then print on screen the grocery list:
render() {
  return (
    {this.state.grocery.map(item => <div>{item}</div>)
 )
}

Make sense?

#5

It does actually, thank you. The only problem is this doesn’t help with my input issue. The user needs to type in their list, but when I type something in the input field and hit enter/submit, it just refreshes. Unless I’m misreading your comment.

#6

The refresh is part of the submit standard html behaviour.

All you have to do is simply preventDefault as you were doing, but not returning an h1 from that; but updating your list of grocery :slight_smile:

[EDIT]

I throw together a working example with an input, a form and a list that gets updated. Hope it helps.

#7

You are awesome. And after re-reading your comments, I understand it. Thanks. :slight_smile:

1 Like