empty property and value in React fetch post request

user_9165040 0
Viewed 3429

This is a React school assignment. The app has two input fields and a submit button. OnClick, it sends a fetch post request with the input values. There is no database, just JSON files storing the values. The request goes through without errors, but the body in the JSON file is empty.

Other details: React is still rendering the colon between the values. For example, instead of "Christy: Post one" it renders " : ". The input fields are working; I can tell in React dev tools because onChange they're updating state.

I've tried:

  • changing contentType to "application/x-www-form-urlencoded"
  • adding these lines in server: app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json())
        import React, { Component } from 'react';

        class NewChirp extends Component {
        constructor() {
            super();
            this.state = { 
                user: "",
                text: ""
            }
            this.fetchChirps = this.fetchChirps.bind(this)
            this.inputHandler = this.inputHandler.bind(this)
        }

        inputHandler(e) {
            this.setState({ [e.target.name]: e.target.value })
        }

        fetchChirps() {
            fetch('http://127.0.0.1:3000/api/chirps/', {
                method: "POST",
                contentType: "application/json; charset=utf-8",
                // contentType: "application/x-www-form-urlencoded",
                body: JSON.stringify({
                    user: this.state.user,
                    text: this.state.text,
                })
            })
                .catch(err => console.log(err))
        }

        render() {
            return (
                <div>
                    <div className="input"></div>
                    <form action="">
                        <input
                            type="text"
                            placeholder="UserName"
                            size="10"
                            id="user"
                            name="user"
                            onChange={this.inputHandler}
                            defaultValue={this.state.user}
                        />
                        <input
                            type="text"
                            placeholder="Type a new chirp"
                            size="60"
                            id="text"
                            name="text"
                            onChange={this.inputHandler}
                            defaultValue={this.state.text}
                        />
                        <button onClick={this.fetchChirps} id="submit">Submit</button>
                    </form>
                </div >
            )
        }
    }


    export default NewChirp;
body-parser reactjs fetch post json
3 Answers

Looks like all I needed was to wrap contentType:

            headers: {
            "Content-Type": "application/json"
        }
user_91650400

If the fields you are sending are printing out blank, then the props are not getting passed from the parent back to the child correctly. I would suggest moving the inputHandler in the NewChirp component and keeping the user and input in the state of NewChirp as well.

user_103982050

Try something like: 

import React, { Component } from 'react';

class NewChirp extends Component {
    constructor() {
        super();
        this.state = {
          user: '',
          text: '',
        }
        this.fetchChirps = this.fetchChirps.bind(this);
        this.inputHandler = this.inputHandler.bind(this);
    }

    inputHandler(e) {
      this.setState({
        user: e.target.user,
        text: e.target.text
        });
    }

    fetchChirps() {
    fetch('http://127.0.0.1:3000/api/chirps/', {
        method: "POST",
        contentType: "application/json; charset=utf-8",
        // contentType: "application/x-www-form-urlencoded",
        body: JSON.stringify({
            "user": this.state.user,
            "text": this.state.text,
        })
    })
        .then(response => console.log(response))
        .catch(err => console.log(err))
}

render() {
    return (
        <div>
            <div className="input"></div>
            <form action="">
                <input
                    type="text"
                    placeholder="UserName"
                    size="10"
                    id="user"
                    name="user"
                    value={this.state.user}
                    onChange={this.inputHandler}
                />
                <input
                    type="text"
                    placeholder="Type a new chirp"
                    size="60"
                    id="text"
                    name="text"
                    value={this.state.text}
                    onChange={this.inputHandler}
                />
                <button onClick={this.fetchChirps} id="submit">Submit</button>
            </form>
        </div >
    )
}
}
export default NewChirp;

sorry the formatting is shitty but you probably get the gist

user_103982050
Related