0

I am trying to make a post request in my app react front end and rails backend.However something is not working im getting this error.My routes and controller are defined fine.im somehow getting an error on line 41 that is fetch(/reviews, { method: "POST",

://localhost:4000/reviews 422 (Unprocessable Entity)

here is my code . routes.rb


  resources :reviews,only: [:index,:show,:create,:update,:destroy]

reviews controller

class ReviewsController < ApplicationController
  


    def index
        review=Review.all
        render json: review

    end
    def show
        review=Review.find(params[:id])
        render json: review

    end
    def create
        review=Review.create!(review_params)
        render json: review,status: :created


    end

    def update
        review=Review.find(params[:id])
        review.update!(review_params)
        render json: review,status: :ok

    end

    def destroy
        review=Review.find(params[:id])
        review.destroy
        head :no_content
    end

    private
    
    def review_params
        params.permit(:image,:date,:description,:destination,:seat,:user_id,:airline_id)

    end

   
end

AddReviews.js

import React,{useState} from "react";
import { useParams } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';


function AddreviewForm(){

  
const navigate=useNavigate();
   
  
  const params=useParams()
  

    const [reviewData, setreviewData] = useState({
    
        image:'',
        date:'',
        destination:'',
        seat:'',
        description:''
        
      })

      function handleReviewChange(event){
        setreviewData({
            ...reviewData,
            [event.target.name]: event.target.value,

        });
  }

  function handleReviewSubmit(event) {
    event.preventDefault();
 
    const newReview ={
        ...reviewData
    };

    fetch(`/reviews`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(newReview),
    })
      .then((r) => r.json())
      .then((newReview)=>{
        setreviewData({
          image:'',
          date:'',
          destination:'',
          seat:'',
          description:''
        })
      });
      navigate(-1)
  }
  
return(
  <>
  <h1>Add a review</h1>
  <form  onSubmit={handleReviewSubmit}>
  <label>Image:</label>
     <input type="text" name="image" aria-label="image" value={reviewData.image} onChange={handleReviewChange}  ></input>
    <label>Date:</label>
       <input type="text" name="date" aria-label="date" value={reviewData.date} onChange={handleReviewChange} ></input>
    <label>Destination:</label>
      <input type="text" name="destination" aria-label="destination" value={reviewData.destination} onChange={handleReviewChange} ></input>
    <label>Seat:</label>
      <input type="text" name="seat" aria-label="seat" value={reviewData.seat} onChange={handleReviewChange} ></input>
    <label>Description:</label>
       <input type="text" name="description" aria-label="description" value={reviewData.description} onChange={handleReviewChange} ></input>
    
    <input class="submit" type="submit"  />

  </form>
 </>
)
}
 export default AddreviewForm;

0 Answers0