How to pass data from blade.php file to a react component using HTML element attributes?

pass data from laravel to react
pass data from blade to react
react pass component as prop
laravel pass data from blade to vue
react blade laravel
laravel blade vue @{{}}
react pass id to component
react props

HELP! I'm doing React + Laravel 6. I want to pass a string to my props in my React component but this has to be passed/written from a file.blade.php file.

** file.blade.php **

<div id="MyComponent"></div>

<div id="MyComponent"> string I want to pass</div> I can't get this innerHTML as well as ID is already tagged.

<div id="MyComponent" customProp="string to I want to pass"></div> I'm not sure if it is possible to use a custom property or the native property of an HTML tag and fetch it inside the JS component but I know this is possible for React components.

I know that php files can't type <MyComponent /> inside a blade.php file like I can in JS and php files can only use a component through ID tag. Please don't suggest fetch, i know that it would solve this problem but the process is needlessly longer for the desired effect, just for display.I'd rather hard code this component in HTML.

Desired effect: I want this React Component to adjust it's text based on the passed string. I can simply hard code the text inside JS but component wouldn't be reusable and defeat the componentization.

you can use <MyComponent />

<div id="app">
     <MyComponent customProp="string to I want to pass" />
</div>

in app.js

 ReactDOM.render(<App />, document.getElementById('app'));

Pass parameter from Laravel controller to React Component Initial , Pass parameter from Laravel controller to React Component Initial State So I have this html file in views/ts.blade.php , called from my controller create new props object with element's data-attributes // result: {tsId: "1241"}� That's because you don't want to have a component rendering static data, but pass dynamic data to your component instead. That's where React's props come into play. You can pass data in React by defining custom HTML attributes to which you assign your data with JSX syntax. So don't forget the curly braces.

I am not a hardcore reactjs dev but what I did recently for a tool I built with a reactjs dev was pass in my variable as a data attribute like so:

<div id="root" data-text="blah blah">

And then, looking at his source code, I can see a function:

componentDidMount()
{
      //other variables here 
      let data_text= $('#root').attr("data-text"); //get the data attribute variable
}

Hope this helps

How To Use VueJS with Laravel Blade – Vegibit, At the moment, in threads/show.blade.php, we loop over all of the replies and for each one a Reply.vue single file component is rendered. 'attributes' in Reply. vue and refactor to 'data' to keep things more consistent. So we can just remove the element from the array in Vue, and the page will update automatically for us. This is the target element where we’ll tell React to place our app. The cool thing is that, if you have a currently existing website, you can place this element anywhere to start building React into your site. Our simple app will be a React class with two nested React classes: One for the input and one for the display.

You can define your element first as a const/var or whatever. Then you access the element's attributes with element.attributes and iterate through your attributes like so:

const element = document.getElementById('MyComponent');

ReactDOM.render(
    <MyComponent {...element.attributes} />,
    element
);

You can access the attributes with this.props.

If you're passing data-* attributes your can pass those with {...element.dataset}

Four ways to pass data from Laravel to Vue, Directly echo-ing into the data object or component prop Your JavaScript will need to be exposed directly in your template files so that the engine can render out your data. Using custom components and Laravel's json blade directive does allow Screenshot of code echoing global window properties. We can pass prop using “this” the same way we set the state in a component earlier. In that example, the state could the be used and passed throughout the component. Passing data from parent to child components is only slightly trickier, in that, we can’t pass data in an unbroken chain to other components.

React Props, React Props are like function arguments in JavaScript and attributes in HTML. To send props into a component, use the same syntax as HTML attributes:� Components in Files. React is all about re-using code, and it can be smart to insert some of your components in separate files. To do that, create a new file with a .js file extension and put the code inside it: Note that the file must start by importing React (as before), and it has to end with the statement export default Car;.

Using React in a Laravel application, For the purpose of demonstrating how to use React in a Laravel Our task management app, will consist of two main components: tasks Then once the validation passes, we create a new project using the validated data in the database, An app.blade.php view file will be rendered for all our app routes. We've already examined how to pass data attributes to a component; however, sometimes you may need to specify additional HTML attributes, such as class, that are not part of the data required for a component to function. Typically, you want to pass these additional attributes down to the root element of the component template.

Use custom html components in your Blade views, Inspired by Vue, a Blade component is an awesome way to reuse html. attributes will be passed as variables to the underlying Blade view. If you want to pass on a php variable or something that needs to be Vue of React it might be hard to distinguish BladeX components from JavaScript components. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

Comments
  • But I need to type in the attribute in HTML like ``` <div id="MyComponent" customProp="My Message"> </div> ``` in a php file. Not in .js file so the <MyComponent /> won't work inside .php file.
  • yes u can do that once app components Mount inside id="app" then u can include other components inside that
  • Holy! It worked. The .attr is new to me. I haven't really explored jQuery. I wish I've read this yesterday.
  • Glad it helped @shupesmerga 🤓
  • @ShuPesmerga if this answer worked for you, please mark it "accepted".
  • This would work, but you already access the element when doing ReactDOM.render(etc.); You can pass the attributes within the ReactDOM.render() function immediately