My goals is to be able to do something like this in my blade view.
name }}\" />
But this doesn\'t render any
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:
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( , 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