One field not posting to Mongoose

1

Hello all,

For the life of me I cannot find the issue here. I am posting three fields to the database in my MERN app. Unfortunately, only two of them show up when I console log the data. I have played with the order of the field and it doesn’t change anything. I am adding to a Schema called Ingredient with the fields Unit, Measure, and Ingredient. Unit does not show up in the database after posting it but Measure and Ingredient do show up. The model is immediately below:

models/Ingredient.js

var mongoose = require('mongoose');

var Schema = mongoose.Schema;

var IngredientSchema = new Schema({ Ingredient: {
    type: String
},
Unit: {
    type: String
},
Measure: {
    type: String
}});

module.exports = Ingredient = mongoose.model('Ingredient', IngredientSchema);

The page for the view I’m posting from (React) is below:

src/components/add_ingredient.js

import React from 'react';
import { FormControl } from '@material-ui/core';
import { InputLabel } from '@material-ui/core';
import { Input } from '@material-ui/core';
import { FormHelperText } from '@material-ui/core';
import { Button } from '@material-ui/core';
import axios from 'axios';

class AddIngredient extends React.Component {

    state = {
        ingredient: '',
        unit: '',
        measure: ''
    }

    handleChangeIngredient = (event) => {
        this.setState({
            ingredient: event.target.value
        })
        console.log(this.state.ingredient)
    }

    handleChangeUnit = (event) => {
        this.setState({
            unit: event.target.value
        })
        console.log(this.state.unit)
    }

    handleChangeMeasure = (event) => {
        this.setState({
            measure: event.target.value
        })
        console.log(this.state.measure)
    }

    handleSubmit = (event) => {
        event.preventDefault()
        let post = {
            Unit: this.state.unit,
            Ingredient: this.state.ingredient,
            Measure: this.state.measure
        }

        axios.post('http://localhost:4000/add_ingredient', post)
        this.setState({
            ingredient: '',
            unit: '',
            measure: ''
        })

    }

    render() {
        return (
            <div>
                            <form 
                            // method="POST" action='http://localhost:4000/add_ingredient' 
                            onSubmit={this.handleSubmit}
                            >
            <input id="ingredient" name="ingredient" type="text" value={this.state.ingredient} onChange={this.handleChangeIngredient} />
            <br></br>
            <input id="unit" name="unit" type="text" value={this.state.unit} onChange={this.handleChangeUnit} />
            <br></br>
            <input id="measure" name="measure" type="text" value={this.state.measure} onChange={this.handleChangeMeasure} />
            <br></br>
            <input type='submit' text="Next Ingredient"/>
          </form>
            </div>

        )

    }
}

export default AddIngredient;

And finally, my backend file with the POST request is here:

server.js

const express = require('express');
var cors = require('cors')
var mongoose = require('mongoose');
var mongoDB = 'mongodb://127.0.0.1/one_database';
require('./models/Ingredient')



mongoose.connect(mongoDB, { useNewUrlParser: true });

var db = mongoose.connection;

db.on('error', console.error.bind(console, 'MongoDB connection error:'));

const app = express();

app.use(cors());
app.use(express.json());
app.use(express.urlencoded());

 app.get('/', (req, res) => {
    Ingredient.find({}, function(err, ingredients){
        let IngredientMap = {};

        ingredients.forEach(function(ingredient){
        IngredientMap[ingredient._id] = ingredient;            
        });

    res.send(IngredientMap);
    });
});

app.post('/add_ingredient', (req, res) => {
    // let vars = req.body;
    let NewIngredient = new Ingredient(req.body);
    console.log(req.body + 'hello')
    NewIngredient.save()
    .then((data) => {
        console.log(req.body + 'helloer');
    })
    .catch((err) => {
        console.log(err);
    })
})

app.listen(4000, () => {
    console.log('App listening to you')
})