Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Randy_Johnson's avatar

Help, InertiaJS Giving 302 Response!

Hi, I have no idea what happened, but now Inertia is giving me a 302 response in the network tabs. If I create something it is no longer showing the new object, but refreshing the page presents it.

It was working fine before.

import React, { useState, useEffect } from 'react';
import { router } from '@inertiajs/react';
import Modal from '@/Components/Modal';
import PrimaryButton from '@/Components/PrimaryButton';
import SecondaryButton from '@/Components/SecondaryButton';

import { IoIosCloseCircleOutline } from "react-icons/io";

export default function Update({
  show,
  setShow,
  url,
  object,
  foundation
}) {

  const [values, setValues] = useState(object);

  function handleChange(e) {
    const key = e.target.id;
    const value = e.target.value
    setValues(values => ({
      ...values,
      [key]: value,
    }))
  }

  function handleSubmit(e) {
    e.preventDefault();
    router.patch(`${url}/${values.id}`, values, { preserveScroll: true });
    setShow(false);
  }

  useEffect(() => {
    setValues(object);
  }, [object])

  const localCss = 'peer p-4 my-4 block w-full border-gray-200 rounded-lg text-sm placeholder:text-transparent focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600';

  return (
    <Modal show={show}>
      <form onSubmit={handleSubmit}>
        <div>
          <div className="flex items-center justify-between p-6 w-full">
            <div className="flex">
              <div className="text-2xl">Update</div>
            </div>
            <div className="flex">
              <IoIosCloseCircleOutline onClick={() => setShow(false)} className="text-2xl" />
            </div>
          </div>
          <hr />
          <div className="p-6">
            {foundation.map((fd, i) => (
              <div key={i} hidden={fd.hidden}>
                {
                  <div>
                    <div className="uppercase text-sm text-gray-800" htmlFor={fd.key}>{fd.key}</div>
                    <input
                      value={values[fd.key]}
                      onChange={handleChange}
                      className={`${localCss} ${fd.css}`}
                      type={fd.type}
                      id={fd.key}
                      name={fd.key}
                      maxLength={fd.maxLength}
                      minLength={fd.minLength}
                      required={fd.required}
                    />
                  </div>
                }
              </div>
            ))}
          </div>
          <hr />
          <div className="p-6">
            <div className="flex gap-4 justify-end items-center">
              <SecondaryButton onClick={() => setShow(false)}>Close</SecondaryButton>
              <PrimaryButton>Update</PrimaryButton>
            </div>
          </div>
        </div>
      </form>
    </Modal>
  )
}
    public function store(Request $request)
    {
        $validated = $request->validate([
            'head' => 'required|unique:curricula|max:200',
            'desc' => 'required',
        ]);

        $data = new Curriculum;
        $data->head = $request->head;
        $data->desc = $request->desc;
        $data->save();
    }
0 likes
1 reply
Randy_Johnson's avatar

It was because I was placing the controller variable into a useState and performing actions on the use state.

    public function index()
    {
        $data = Curriculum::all();
        return Inertia::render('Admin/Curriculums', ['data' => $data]);
    }
export default function Curriculums({ auth, data }) {

    const [objects, setObjects] = useState(data);

Please or to participate in this conversation.