How to add data from Laravel using a ReactJs component?

Question

I'm trying to add Laravel existing conditional statement on ReactJs component

I've tried to add it on render function.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export class Login extends Component {
    render() {
        return (
            <div class="login">
                @if (Route::has('login'))
                    <div class="top-right links">
                        @auth
                            <a href="{{ url('/home') }}">Home</a>
                        @else
                            <a href="{{ route('login') }}">Login</a>
                            /*-- <a href="{{ route('register') }}">Register</a>
                                @if (Route::has('register'))
                            @endif */
                        @endauth
                    </div>
                @endif
            </div>
        );
    }
}

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

<div id="login"> </div>

require('./components/Welcome');

I'm trying to display the existing laravel script from react components.

Thanks in advance for the help.

@if is used by blade template engine and react use jsx or ts which is not possible to use blade template codes try to use js if condition — sid heart
– sid heart, Commented Sep 7, 2019 at 8:36
This problem were months ago. Thanks for this information sid — Philanthropist
– Philanthropist, Commented Nov 26, 2019 at 15:32

sid heart · Accepted Answer · 2019-09-07 09:02:53Z

1

@if use by blade template which output is <?php if(condition) ?>

you can try this

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export class Login extends Component {
    render() {
        return (
            <div class="login">

                    <div class="top-right links">
                       if (isLoggedIn) {
                            <a href="/home">Home</a>
                        } else {
                            <a href="/login">Login</a>

                        }
                    </div>

            </div>
        );
    }
}

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

isLoggedIn is coming from state of react where should true when user is logged in

answered Sep 7, 2019 at 9:02

sid heart

1,1491 gold badge13 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Philanthropist Over a year ago

Sorry It was weeks ago, I forgot this problem on my notes. Thanks anyway for the help.

Collectives™ on Stack Overflow

How to add data from Laravel using a ReactJs component?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related