CODEWITHSUNDEEP
reactjsreact-redux
Achilles
Achilles

Reputation: 441

React State is empty upon form submission

I have the following component that is submitting new posts. The form is using materiail-ui. I can successfully change the state. But when I submit the form, it gave me the error such that {state is empty} error. But on render event, I tried to console log the state, and I can see the state is changing whenever I type in the new values. Below is the sample of code. For the full codes you can check in my github , which is https://github.com/HtunHtunHtet/reactProject2/blob/master/client/src/components/add_post.js. Thanks in advance. 

class AddPost extends  Component {
state = {
            postCategory: "react",
            postTitle: "",
            postAuthor: "",
            postContent: ""
        };

handleChange = (event, index, postCategory) => this.setState({postCategory});

handleSubmit(e){
    e.preventDefault();

    console.log(this.state);
    const data = {
        timestamp: Date.now(),
        title: this.state.postTitle,
        body: this.state.postContent,
        author: this.state.postAuthor,
        category: this.state.postCategory,
        deleted: false,
        voteScore: 1
    };
    this.props.fetchAddPost(data);
    this.props.history.push("/");
}

handleInputChange = e => {
    const target = e.target;
    const value = target.value;
    const name = target.name;

    this.setState({
        [name]: value
    });
};

Upvotes: 0

Views: 409

Answers (1)

Karan Jariwala
Karan Jariwala

Reputation: 727

Make handleSubmit a arrow function Or bind it to the component’s “this” in the constructor. Doing either of this will make sure that “this” refers to your Component, when you use “this” in handleSubmit.

Upvotes: 1

Related Questions