mlazuardy
1 year ago

Laravel React Redux Internal Server Error

Posted 1 year ago by mlazuardy

Currently i want to Increasing my skill in javascript with Laravel as a Backend, but im finding some trouble now. Im making request to Create New blog with React+Redux to manage the form request, my store Controller looks like this

BlogController


    public function store(Request $request)
    {
        $blog = new Blog([
            'title'=> $request->get('title'),
            'body' => $request->get('body'),
            'user_id' => auth()->id()
        ]);
        $blog->save();
        return response($blog,201);
    
    }

and to save the data, using actions.js and connect it to form Component

actions.js

export function saveBlog(data){
    return dispatch => {
        return axios.post('/blog',{
            headers:{
                'Content-Type':'application/json',
            }
        }).then(response=>console.log(data));
    };
}

Form.js

import React from 'react';
import uuid from 'uuid';
import {connect} from 'react-redux';
import {saveBlog} from './actions/blog-action'; 

class NewBlog extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            title:'',
            body:'',
            isLoading:false,
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(e){
        this.setState({
            [e.target.name]:e.target.value
        });
    }
    handleSubmit(e){
        e.preventDefault();
        const {title,body,user_id} = this.state;
        this.setState({isLoading:true});
        this.props.saveBlog({title,body,user_id});
        
    }
    render(){
        return(
            <div className="col-md-7" >
                <h2>New Blog</h2>
                <form onSubmit={this.handleSubmit} >
                <input type="hidden" name="_token" value={window.App.csrfToken} />
                    <div className="form-group">
                        <label htmlFor="title">Title</label>
                        <input type="text" onChange={this.handleChange}  value={this.state.title} name="title" className="form-control" />
                    </div>
                    <div className="form-group">
                        <label htmlFor="body">Body</label>
                        <textarea name="body" className="form-control" onChange={this.handleChange} value={this.state.body} cols="30" rows="10"></textarea>
                    </div>
                    <button className="btn btn-primary">{this.state.isLoading ? "Saving..." :"Save" }</button>
                </form>
            </div>
        )
    }
}
export default connect(null,{saveBlog})(NewBlog);

i dont know where im missing because its hard to see the error with Laravel+React

Please sign in or create an account to participate in this conversation.