Redux only pulling one part of data when deconstructed in action - reactjs

Question

I'm building a program for people to organise potlucks using the MERN stack.
I have a form for people to fill out, and if I console log what's coming through from that in the action, it is taking all of the fields, but after I do this in the action:
export const createPotluck = (potluck) => async (dispatch) => {
try {
const { data } = await api.createPotluck(potluck);
console.log("data", data)
console.log("potluck", potluck)
dispatch({ type: "CREATE", payload: data});
} catch (error) {
console.log(error);
}
};
It is only passing through one field. When I console log "potluck", I get everything:
{potluckHost: "host", potluckTitle: "title", potluckTheme: "theme", essentials: Array(3)}essentials: (3) ["1", "2", "3"]potluckHost: "host"potluckTheme: "theme"potluckTitle: "title"[[Prototype]]: Object
But when I console log "data", I only get the "essentials" array:
{essentials: Array(3), _id: "61320fec40906afff8aed63c", __v: 0}
I have spent ages working on this and I just cannot understand why it's happening like this. I'm basing the structure of it on a tutorial I followed which works absolutely no problem, so I'm really now at my whits end.
Here's (what I think are...) the relevant bits of code - but could it be that I'm doing something wrong in the controller or something? Just in case, the whole thing is on github here: https://github.com/gordonmaloney/whatLuck-mern
Here's the CreatePotluck form:
import React, { useState, useEffect } from "react";
import { TextField, Button, Typography, Paper } from "#material-ui/core";
import { useDispatch } from 'react-redux';
import { createPotluck } from '../actions/potlucks'
const CreatePotluck = ( ) => {
const [potluckData, setPotluckData] = useState({ potluckHost: "", potluckTitle: "", potluckTheme: "", essentials: "" });
const dispatch = useDispatch();
const handleSubmit = (e) => {
e.preventDefault()
dispatch(createPotluck(potluckData));
}
return (
<Paper>
<form autoComplete="off" noValidate onSubmit={handleSubmit} >
<Typography variant="h6">Create a Potluck</Typography>
<TextField name="host" variant="outlined" label="Potluck Host" fullWidth value={potluckData.potluckHost} onChange={(e) => setPotluckData({ ...potluckData, potluckHost: e.target.value }) } />
<TextField name="title" variant="outlined" label="Potluck Title" fullWidth value={potluckData.potluckTitle} onChange={(e) => setPotluckData({ ...potluckData, potluckTitle: e.target.value })} />
<TextField name="theme" variant="outlined" label="Potluck Theme" fullWidth value={potluckData.potluckTheme} onChange={(e) => setPotluckData({ ...potluckData, potluckTheme: e.target.value }) } />
<TextField name="essentials" variant="outlined" label="Essentials (coma separated)" fullWidth value={potluckData.essentials} onChange={(e) => setPotluckData({ ...potluckData, essentials: e.target.value.split(',') })} />
<Button variant="contained" color="primary" size="large" type="submit" fullWidth>Submit</Button>
</form>
</Paper>
);
}
export default CreatePotluck
The action is as above, and the API call is here:
import axios from 'axios';
const url = 'http://localhost:5001/potlucks';
export const fetchPotlucks = () => axios.get(url);
export const createPotluck = (newPotluck) => axios.post(url, newPotluck)
And the controller:
export const createPotluck = async (req, res) => {
const potluck = req.body;
const newPotluck = new PotluckBody(potluck);
try {
await newPotluck.save();
console.log("controler", potluck)
res.status(201).json(newPotluck)
} catch (error) {
res.status(409).json({message: error})
}
}
Thanks so much in advance folks, and sorry if this is a daft question - I'm v new to dabbling in backend 🙌

Answer 1

I solved the issue. I had a mismatch in how I'd call things from the form and the MongoDB schema model. I updated that and now it works fine.
In my Model, I had originally had this:
import mongoose from 'mongoose';
const postSchema = mongoose.Schema({
title: String,
theme: String,
host: String,
essentials: [String]
});
const PotluckBody = mongoose.model('PotluckBody', postSchema)
export default PotluckBody;
But I later updated the names of elements elsewhere to potluckTitle, potluckTheme, potluckHost, and essentials. That meant that when the data was being sent to the model, the ones that had had their name changed were vanishing, but essentials was passing fine because it hadn't changed. I updated the file to this:
import mongoose from 'mongoose';
const postSchema = mongoose.Schema({
potluckTitle: String,
potluckTheme: String,
potluckHost: String,
essentials: [String],
});
const PotluckBody = mongoose.model('PotluckBody', postSchema)
export default PotluckBody;
And now it works great 😁