simple react login auth [without form] [with fetch] (laravel)

 welcome.blade.php

<script src="{{ asset('js/app.js') }}" defer></script>

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

<div id="example" token='{{ csrf_token() }}' route_login='{{route('login')}}' ></div>

Example.js

import React, { useState } from 'react';

import ReactDOM from 'react-dom';

function Example(props) {

    const [email, setEmail] = useState('');

    const [password, setPassword] = useState('');

    function handleSubmit() {

        const data = { email: email, password: password, _token: props.token };

        const formData = Object.keys(data).map(

            function (keyName) {

                return encodeURIComponent(keyName) + '=' + encodeURIComponent(data[keyName])

            }

        ).join('&');

        fetch(props.route_login, {

            method: "POST",

            body: formData,

            headers: new Headers({

                "Content-type": "application/x-www-form-urlencoded",

                'Accept': 'application/json'

            })

        })

            .then(res => {

                // console.log(res);

                return res.json();

            })

            .then(data => {

                console.log(data);

            })

            .catch(e => {

            })

    }

    return (

        <div className="container">

            <br />

            <div className="card" >

                <div className="card-body">

                    <h5 className="card-title">Login</h5>

                    <label for="email">Email:</label><br />

                    <input type="text" value={email} onChange={e => setEmail(e.target.value)} name="email" /><br />

                    <label for="password">Password:</label><br />

                    <input type="text" value={password}

                        onChange={e => { setPassword(e.target.value); }}

                        onKeyDown={e => { e.key === 'Enter' ? handleSubmit() : () => { } }}

                    /><br /><br />

                    <button className='btn btn-primary' onClick={handleSubmit}>Submit</button>

                </div>

            </div>

        </div>

    );

}

export default Example;

if (document.getElementById('example')) {

    var _token = document.getElementById('example').getAttribute('token');

    var _route_login = document.getElementById('example').getAttribute('route_login');

    ReactDOM.render(<Example token={_token} route_login={_route_login} />, document.getElementById('example'));

}

AuthenticatesUsers.php

    protected function sendLoginResponse(Request $request)

    {

        $request->session()->regenerate();

        $this->clearLoginAttempts($request);

        if ($response = $this->authenticated($request, $this->guard()->user())) {

            return $response;

        }

        return $request->wantsJson()

                    //? new JsonResponse([], 204)

                    ? response()->json(['logged_in'=>true])

                    : redirect()->intended($this->redirectPath());

    }