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;