Redux objects is being submited empty on submission

I am having an issue when I submit my form my object is being submitted empty when , and I confirmed this in the redux dev-tool as well. When I submit my form, a card is supposed to appear on the DOM with the info I entered into the form on it, or in react terms with the info passed down to the props of that component. Well when I submit the info is empty, and my redux dev tool is showing that object is empty on submission.

Here is my POST action

export const postRecipes = (recipe) => {
  
    const BASE_URL = `http://localhost:3001`
    const RECIPES_URL =`${BASE_URL}/recipes`
    const config = {
        method: "POST",
        body:JSON.stringify(recipe),
        headers: {
        "Accept": "application/json",
        "Content-type": "application/json"
     }
    }

    return (dispatch) => {
      
      fetch(RECIPES_URL,config)
        .then(response =>{ response.json()})
        .then(recipe => { dispatch({ type: 'ADD_RECIPE', payload: recipe })
        
    })
    .catch((error) => console.log.error(error))
       
        
    };

    
    
  }

Here is my reducer action type for Adding the object(Hopefully I worded this correctly)

case 'ADD_RECIPE':
            const recipe = {
                id: action.id,
                name: action.name,
                ingredients: action.ingredients,
                chef_name: action.chef_name,
                origin: action.origin,
                instructions: action.instructions,
                category: action.category
                
            }
           
            return{
                ...state,
                recipes: [...state.recipes, recipe],
                loading: false
            }
        

Here is the event handler that goes off when a user interacts with the submit button

import React, { Component } from 'react'
import Select from 'react-select'
import axios from 'axios'
import '../index.css'



class RecipeInput extends Component{
    constructor(props){
        super(props)
        this.state = {
            
            category_id: [],
            name:'',
            ingredients: '',
            chef_name: '',
            origin: '',
            instructions:''
            
        }
        

        
    }


      

    
    async getOptions(){
        const BASE_URL = `http://localhost:3001`
        const CATEGORIES_URL =`${BASE_URL}/categories`
        const res = await axios.get(CATEGORIES_URL)
        const data = res.data

        const options = data.map(d => ({
           
            
           
            'label' : d.category,
            'id' : d.id

            
        }))

        this.setState({category_id: options})
    }

    

    handleNameChange = (event) =>{
        this.setState({name:event.target.value})
    }

    handleInsChange = (event) => {
        this.setState({instructions:event.target.value})
    }

    handleIngChange = (event) => {
        this.setState({ingredients:event.target.value})
    }

    handleChefChange = (event) =>{
        this.setState({chef_name:event.target.value})
    }

    handleOriginChange = (event) => {
        this.setState({origin:event.target.value})
    }

    handleChange = (e) =>{
        this.setState({category_id:e.id})
    }

    componentDidMount(){
        this.getOptions()
    }


    handleSubmit = (e) =>{
        e.preventDefault();
        this.setState({
        name:'',
        ingredients: '',
        chef_name: '',
        origin: '',
        instructions: ''
       })
     this.props.postRecipes(this.state)
     
    }

    

    
    
        

    render(){
       let dropdown = 'form-select form-select-sm'
  
        return(
            <div>
                <p>1. American, 2. Seafood, 3. Italian, 4. Keto, 5. Asian, 6. Mexican, 7. International</p>
                <form onSubmit={this.handleSubmit}>
                    <Select options={this.state.category_id} onChange={this.handleChange} className={dropdown}/>
                    <div>
                    <label for='name'>Recipe Name:</label>
                    <input  className ="form-control" type='text' value={this.state.name} onChange={this.handleNameChange} />
                    </div>
                    <div>
                    <label for='name'>Country Origin:</label>
                    <input className ="form-control" type='text' value={this.state.origin} onChange={this.handleOriginChange} />
                    </div>
                    <div>
                    <label for='name'>Chef Name:</label>
                    
                    <input className ="form-control" type='text' value={this.state.chef_name} onChange={this.handleChefChange} />
                    </div>
                    <div>
                    <label for='name'>Ingredients:</label>
                    <textarea className ="form-control" cols="30" rows="5" type='text' value={this.state.ingredients} onChange={this.handleIngChange} />
                    
                    <label for='name'>Instructions:</label>
                    <textarea className ="form-control" cols="30" rows="5" type='text' value={this.state.instructions} onChange={this.handleInsChange} />
                    </div>
                    <input value='submit' type='submit'/>
                </form>
                
            </div>
        )
    }


 


}

export default RecipeInput

I feel like this is in my post action somewhere but not sure where, how can I correct this?

163 thoughts on “Redux objects is being submited empty on submission”