I have a project with laravel and vue but I want to use react instead of vue. in laravel blade have used a div like below

<follow-button user-id="{{$user->id}}"></follow-button>

and in the vue js file have written like below

props:['userId'],

inside export default{} and accessing it using, this.userId

I have searched and tried below code

<script>
        let userId = '{{ $user->id }}'
    </script>

above code in the blade and trying to access using userId but not working.

React.js

import axios from 'axios';
import React from 'react';
import ReactDOM from 'react-dom';


function FollowButton() {
    return (
        <div className="container">
           <Button/>
        </div>
    );
}




const Button = () => {

     var follow = ()=>{
         axios.post('/follow/'   userId)
         .then(Response => {
             alert(Response.data)
         })
     }

    return(
        <div>
             <button onClick={follow}  className="btn btn-outline-primary mb-2 btn-sm ms-3">Follow</button>
        </div>
    )
}


export default FollowButton;

if (document.getElementById('followButton')) {
    ReactDOM.render(<FollowButton />, document.getElementById('followButton'));
}

the index.blade.php file

<div >
    <div >
        <div >
            <div >{{$user->username}}</div>
            
            <div id="followButton" userId="{{$user->id}}"></div>
    </div>

     <script>
        let userId = '{{ $user->id }}';
     </script>

        @can('update', $user->profile)
        <a href="/p/create">Add New Post</a>
        @endcan

    </div>

    @can('update', $user->profile)
    <a href="/profile/{{$user->id}}/edit">Edit Profile</a>
    @endcan
        
    <div >
        <div ><b>{{$user->posts->count()}}</b> posts </div>
        <div ><b>123</b> followers </div>
        <div ><b>123</b> following </div>
    </div>
    <div  >{{$user->profile->title}}</div>
    <div>{{$user->profile->description}}</div>
    <div><a href="#">{{$user->profile->url}}</a></div>
</div>

server issue but what to do? all are on the local server.

CodePudding user response：

This was the problem

and the reason is so simple below in the Controller dir, I used App\Models\User

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\User;

class FollowsController extends Controller {

public function store(App\Models\User $user)
{
    return $user->username;
}

}

instead of User after declaring the use method.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\User;

class FollowsController extends Controller {

public function store(User $user)
{
    return $user->username;
}

}

CodePudding user response：

And to get data from laravel blade.php we can simply use

                <script>
                let userId = '{{ $user->id }}';
                </script>

Now we can use the 'userId' variable to our react component.

ThankQ!