How to pass form data to MongoDB in React?

Question

I want to pass the values of the inputs in a form to my MongoDB database. My issue is I am not sure how to go about doing that.

My thinking was that in the post request in my express route when I am instantiating a new Bounty I need to replace req.body with the values of each form input, but I don't know if that is exactly right and if it is, I don't know how to actually get it to look at the values of the form that is in another file.

Here is my form component:

import React, {Component} from "react";
import {connect} from "react-redux";
import {addBounty, displayBounties} from "./redux";

class BountyForm extends Component {
    constructor(){
        super();
        this.state = {
            input: {
                firstName: "",
                lastName: "",
                living: "",
                amount: "",
                type: ""
            }
        }
    }

    componentDidMount = () => {
        this.props.displayBounties();
    }

    handleChange = event => {
        const {name, value} = event.target;
        this.setState(prevState => {
            return {
                input: {
                    ...prevState.input,
                    [name]: value
                }
            }
        })
    }

    render(){
        return(
            <div>
                <form>
                    <input type="text" placeholder="First Name" name="firstName" value={this.state.input.fName} onChange={this.handleChange}/>
                    <input type="text" placeholder="Last Name" name="lastName" value={this.state.input.lName} onChange={this.handleChange}/>
                    <input type="text" placeholder="Living?" name="living" value={this.state.input.living} onChange={this.handleChange}/>
                    <input type="text" placeholder="Bounty Amount" name="amount" value={this.state.input.amount} onChange={this.handleChange}/>
                    <input type="text" placeholder="Jedi or Sith?" name="type" value={this.state.input.type} onChange={this.handleChange}/>
                    <button>Submit</button>
                </form>
            </div>
        )
    }
}

export default connect(state => state, {addBounty, displayBounties})(BountyForm);

Here are my Express routes:

const express = require("express");
const bountyRouter = express.Router();
const Bounty = require("../models/bounty");


bountyRouter.route("/")
    .get((req, res) => {
        Bounty.find((err, bounties) => {
            if(err) return res.status(500).send(err);
            return res.send(bounties);
        })
    })
    .post((req, res) => {
        const newBounty = new Bounty(req.body);
        newBounty.save((err, savedBounty) => {
            if(err) return res.status(500).send(err);
            return res.status(201).send(savedBounty);
        })
        res.send(newBounty);
    });

bountyRouter.route("/:id")
    .get((req, res) => {
        Bounty.findById(req.params.id, (err, foundBounty) => {
            if(err) return res.status(500).send(err);
            return res.send(foundBounty);
        })
        res.send(foundBounty);
    })
    .put((req, res) => {
        Bounty.findByIdAndUpdate(req.params.id, req.body, {new: true}, (err, updatedBounty) => {
            if(err) return res.status(500).send(err);
            return res.status(201).send(updatedBounty);  
        })
    })
    .delete((req, res) => {
        Bounty.findByIdAndRemove(req.params.id, (err, deletedBounty) => {
            if(err) return res.status(500).send(err);
            return res.status(201).send(deletedBounty);
        })
        console.log("Deleted Bounty!");
    })

module.exports = bountyRouter;

And here's my Redux:

import {createStore, applyMiddleware} from "redux";
import axios from "axios";
import thunk from "redux-thunk";


export const displayBounties = () => {
    return dispatch => {
        axios.get("/bounty").then(response => {
            dispatch({
                type: "DISPLAY_BOUNTIES",
                bounties: response.data
            })
        }).catch(err => {
            console.log(err);
        })
    }
}

export const addBounty = (newBounty) => {
    return dispatch => {
        axios.post("/bounty", newBounty).then(response => {
            dispatch({
                type: "ADD_BOUNTY"
                // add: response.data
            })
        })
    }
}

const reducer = (prevState = {}, action) => {
    switch(action.type){
        case "DISPLAY_BOUNTIES":
            return {
                bounties: action.bounties
            }
            case "ADD_BOUNTY":
                return {

                }
        default:
            return prevState;
    }
}

const store = createStore(reducer, applyMiddleware(thunk));

export default store;

Answer 1

So, I figured it out myself.

Turns out i was wrong, I do not need to change the req.body when instantiating a new Bounty.

We need to import the body-parser middleware in order to get it to read the data in the inputs. Then we need to use it in the Express routes file before making any of the routes, like this:

bountyRouter.use(bodyParser.urlencoded({extended: true}))

//routes go here...

The urlencoded method just gets the data from the form inputs and places them in the request body, hence why we don't need to remove the req.body that I mentioned eariler.

And finally in my form, I need to specify what action I am doing to the form and where to send the data. Since I want to do a POST, it would look like this:

<form action="/bounty" method="post">
//rest of the form