empty property and value in React fetch post request

Question

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;

Answer 1

Looks like all I needed was to wrap contentType:

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

Answer 2

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.