How to set dynamic meta tag in react js?

Question

I am making a website in which I am trying to set meta tag dynamically from the backend I am using Laravel as a backend and react JS as a frontend but it doesn't work i already tried Helmet but it won't work either so please can anyone help me. thank you

React.js 18 version not work hydrate

https://react.dev/reference/react-dom/hydrate

Helmet not working

<Helmet>
    <title>{title}</title>
    <meta name="description" content={title} />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={title} />
    <meta property="og:image" content={image} />
</Helmet>

npm i react-helmet-async library not working

Answer 1

If you have front project in react js and API's created in php-laravel than you want get request from server when post detail api call.

you can set middleware in particular api and get request from facebook,whastapp,twitter and so on. like...

I created middleware in laravel. and register middleware in app/http/kernal.php

protected $middleware = [
        // \App\Http\Middleware\TrustHosts::class,
        \App\Http\Middleware\TrustProxies::class,
        \Fruitcake\Cors\HandleCors::class,
        \App\Http\Middleware\PreventRequestsDuringMaintenance::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
        \App\Http\Middleware\SocialMediaMiddleware::class,
    ];

And created middleware....

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class SocialMediaMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse)  $next
     * @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
     */
    public function handle(Request $request, Closure $next)
    {
        $userAgent = $request->header('User-Agent');
        if (strpos($userAgent, 'facebookexternalhit') !== false) {
            $request->attributes->add(['social_media' => 'facebook']);
        } elseif (strpos($userAgent, 'Twitterbot') !== false) {
            $request->attributes->add(['social_media' => 'twitter']);
        }
        return $next($request);
    }
}

You will get this keyword from server and get than you can set meta tags.

because react js not allowed update or change and add meta tags in src/index.html file