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

Question

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.

BonisTech · Accepted Answer · 2020-05-04 19:09:16Z

2

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}

edited May 4, 2020 at 19:09

answered May 4, 2020 at 18:55

BonisTech

4316 silver badges17 bronze badges

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

1 Comment

Phạm Huy Phát Over a year ago

the dataset is gold

Kamlesh Paul · Accepted Answer · 2020-01-03 12:11:01Z

0

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'));

edited Jan 3, 2020 at 12:11

answered Jan 3, 2020 at 12:01

Kamlesh Paul

12.5k2 gold badges23 silver badges36 bronze badges

2 Comments

Shu Pesmerga Over a year ago

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.

Kamlesh Paul Over a year ago

yes u can do that once app components Mount inside id="app" then u can include other components inside that

PHPology · Accepted Answer · 2020-01-03 12:26:14Z

0

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

answered Jan 3, 2020 at 12:26

PHPology

1,0126 silver badges12 bronze badges

3 Comments

Shu Pesmerga Over a year ago

Holy! It worked. The .attr is new to me. I haven't really explored jQuery. I wish I've read this yesterday.

PHPology Over a year ago

Glad it helped @shupesmerga 🤓

BonisTech Over a year ago

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

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related