pass data blade (laravel) to react component

Question

I need pass data in blade to react component. I use laravel 5.6.
For example in simple react component pass data via 'props' and i don't find method in laravel documentation to pass. I've tried (blade):

<Preview article={{ $article }}></Preview>

React:

constructor(props){
  super();
  this.state={
    article: props.article
  }
}

render() {
  return (
    <div>
      <h2>{this.state.article}</h2>
      <h3>Net</h3>
    </div>
  );
}

How can i do it in Laravel? In advance thanks for help.

Can you please show more code? Your entire view and react component would be better to see what you're trying to do. — Cory Fail
– Cory Fail, Commented Jul 11, 2018 at 14:42
i need just pass data. Not understanding why you need code :) Okey. Source code: pastebin.com/NDE1Qq5b I tried so and not working — Nikita Abramov
– Nikita Abramov, Commented Jul 11, 2018 at 15:13

Mabrouki Fakhri · Accepted Answer · 2018-07-11 14:44:31Z

2

Use this :

{!! $article !!}

instead of this :

{{ $article }}

answered Jul 11, 2018 at 14:44

Mabrouki Fakhri

2291 silver badge7 bronze badges

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

1 Comment

Nikita Abramov Over a year ago

such way don't work in laravel. I think need something composer package or other way

Cory Fail · Accepted Answer · 2018-07-11 15:31:47Z

1

To pass data from blade to react, simply use let in your blade view.

Change your view to something like this

// Use react to display article
<Preview article={article}></Preview>

// Pass data to react
<script>
      let Article= '{{ $article }}'
</script>

answered Jul 11, 2018 at 15:31

Cory Fail

1,0909 silver badges27 bronze badges

1 Comment

Nikita Abramov Over a year ago

Unfortunately does not work. Did I do it right? pastebin.com/DQLyy3j7 Help me please.

Collectives™ on Stack Overflow

pass data blade (laravel) to react component

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related