CODEWITHSUNDEEP
phpreactjslaravelinertiajsflash-message
Asher
Asher

Reputation: 317

How to return simple Flash message with Inertia React & Laravel?

I'm trying to return a Flash message for a user in my app when the complete a form and are redirected back to the 'dashboard'.

I'm fairly new to Inertia so maybe its me but the docs don't seem to be too in depth, I wondered how to correctly call this Flash function and fetch it on the frontend side in the Dashboard.js file.

This is my controller and Dashboard file code:

public function completeForm(Request $request){

        $request->validate([
            'commitment' => 'required|string',
            'partner' => 'required|string',
            'question' => 'required|string',
        ]);

        $user = Auth::user();
        
        $user->update([
            'partner' => $request->partner,
            'commitment' => $request->commitment,
            'question' => $request->question,
        ]);

        return redirect('/dashboard')->with('success', 'Your profile has been updated!');
    }

And Dashboard:

export default function Dashboard(props) {
    const [modalVisible, setModalVisible] = useState(false);

    console.log(props);

    const handleModal = () => {
        setModalVisible(true);
    };

    return (
        <Empty
            auth={props.auth}
            errors={props.errors}
            header={
                <h2 className="font-semibold text-xl text-gray-800 leading-tight">
                    Dashboard
                </h2>
            }
        >
            <Head title="Dashboard" />

            <div className="py-12">
                <div className="max-w-3xl mx-auto sm:px-6 lg:px-8">
                    {/* <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                        <div className="p-6 bg-white border-b border-gray-200">
                            You're logged in!
                        </div>
                    </div> */}
                    <div className="bg-yellow-500 px-1 py-1 inline-block ">
                        <p className="text-6xl font-bold uppercase text-white custom">
                            Your Details
                        </p>
                    </div>
                   
                    {/* {flash.message && <div class="alert">{flash.message}</div>} */}

                    <div className="mt-16 border-2 border-yellow-500 p-2">
                        <p className="text-xl font-bold italic">
                            Next, we'd need you to submit your questions to us
                            for review
                        </p>

                        <div className="flex flex-col">
                            <p className="italic text-gray-400 text-lg font-medium mt-2">
                                Please use the button below to start filling out
                                your form:
                            </p>
                            <a
                                href="/commitment-questions"
                                className="text-center bg-yellow-500 py-2 px-3 self-center mt-8 text-2xl custom text-white font-bold mb-4"
                            >
                                Complete Form
                            </a>
                        </div>
                    </div>
                   
                </div>
            </div>
        </Empty>
    );
}

I know its probably straightforward, thanks in advance for any help on this one!

Upvotes: 0

Views: 6839

Answers (1)

Andre Madarang
Andre Madarang

Reputation: 116

Share a flash message to be globally available, then make use of it where needed in your React components: https://inertiajs.com/shared-data#flash-messages

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'flash' => [
                // in your case, you named your flash message "success"
                'message' => fn () => $request->session()->get('message')
            ],
        ]);
    }
}

Then use it in any React component:

import { usePage } from '@inertiajs/inertia-react'

export default function Dashboard() {
  const { flash } = usePage().props

  return (
    <main>
      <div>
        {flash.message && (
          <div class="alert">{flash.message}</div>
        )}
      </div>
    </main>
  )
}

Upvotes: 2

Related Questions