Laravel 5.5 render a React component in a blade view with data from the controller

Question

My goals is to be able to do something like this in my blade view.

<Example name="{{ $user->name }}" />

But this doesn't render anything.

When I do: <div id="example"></div>it renders the component without the props value which is normal.

So I am trying to pass data that came from my controller to my React component as a prop.

I am not sure if it's even possible.

This is my App.js:

require('./components/Example');

This is my Example.js component:

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

class Example extends Component {
    render() {
        return (
            <div className="container">
                <div className="row">
                    <div className="col-md-8 col-md-offset-2">
                        <div className="panel panel-default">
                            <div className="panel-heading">Example</div>

                            <div className="panel-body">
                                Hello, {this.props.name}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

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

Answer 1

I do it like this eg. in index.blade.php

<div id="main" data-user_name="{{$user->name}}" />

Then in Main.js

const Main = (props) => {
  return (
    <div>
      <Component {...props} />
   </div>
 );
}

if(document.getElementById('main')) {
  const el = document.getElementById('main')
  const props = Object.assign({}, el.dataset)
  ReactDOM.render(<Main {...props} />, el);
}

Answer 2

This is perhaps a slightly cleaner solution than the others suggested. We don't need to specify each prop we pass in using this method either.

In your blade file:

<div id="react-component" data-foo='{{ $foo }}' data-bar='{{ $bar }}'>

On a side note, if $foo is something that isn't JSON, e.g a Laravel Collection or an array, we can apply an additional method: $foo->toJson().

In your component:

if (document.getElementById('react-component')) {

    const component = document.getElementById('react-component');
    const props = Object.assign({}, component.dataset);

    ReactDOM.render(<ReactComponent {...props} />, component);
}

You'll then have access to all the props you pass in using the data attribute from your html. Just like any other react you can access your props inside of your component like: this.props.foo