Posting a booking from user to sitter

[kellylarrea]

What stack are you using?

(ex: MERN(mongoose + react), DR(django + react), PEN, etc.)

DR

What's the problem you're trying to solve?

I created a form to post a booking but im getting a 405 error when posting

Post any code you think might be relevant (one fenced block per file)

booking_views.py
def post(self, request):
        """Create request"""
        # Add user to request data object\
        user = request.user
        print('I AM DATA!!!!!',request.data)
        booking_data = Booking(pet_owner = user )
        booking = BookingSerializer(booking_data, data=request.data)
        # If the review data is valid according to our serializer...
        if booking.is_valid():
            # Save the created booking & send a response
            booking.save()
            return Response({ 'booking': booking.data }, status=status.HTTP_201_CREATED)
        # # If the data is not valid, return a response with the errors
        return Response(booking.data, status=status.HTTP_400_BAD_REQUEST)

CreateBooking.js
export default function CreateBooking (props) {
    console.log('this is props for sitter booking', props)

    const[booking, setBooking] = useState([])
    const[createdBooking, setCreatedBooking] = useState([])
    const[sitterName, setSitterName] = useState(props.singleSitter.first_name)
    const[date, setDate] = useState([])
    const newParams = useParams()
    const now = new Date();

    const yesterdayBegin = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
    const todayEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999)

    const [value, onChange] = useState([yesterdayBegin, todayEnd]);
    // console.log('this is the', yesterdayBegin)
    // console.log('this is the', todayEnd)

    const createBooking = (e) => {
        e.preventDefault()
        // console.log('form', e.target.name.value)
        // console.log('form date', e.target.date.value)
        axios({
            url: `http://localhost:8000/bookings/${newParams.id}`,
            method: 'POST',
            headers: {
                'Authorization': `Token ${props.user.token}`
            },
            body:{sitter: props.singleSitter.first_name,
            start_date:date[0], end_date:date[1]}
        })

    }

    const handleDate = (data) => {
        console.log('date data', data)
        setDate(data)
    }

    // useEffect(() =>{
    //     console.log('create booking')
    //     createBooking()
    // }, [])

    return(
        <div>
             <h1>Create a Booking</h1>
            {/* <form onSubmit={createdBooking}> */}
                <label htmlFor ='name'>Name:</label>
                <input type='text' name='name' id='name' 
                  value={sitterName}
                  onChange={e=>setSitterName(e.target.value)}/>
                  <h3>Select Dates:</h3>
            <DateRangePicker
                name='date'
                id='date'
                onChange={handleDate}
                value={value}
            />
            <button onClick={createBooking}>created booking</button>
            {/* </form> */}

        </div>

    )
}

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

xhr.js:210 POST http://localhost:8000/bookings/1 405 (Method Not Allowed)

What is your best guess as to the source of the problem?

Maybe my django file is not correct

What things have you already tried to solve the problem?

I have tried changing code but not really sure what to do