Passing data from React component to Laravel controller

Question

I a laravel project using React js for the font-end , i would like to pass some data rendered by a React component to my controller. In a blade template i have a form , and within that form , i'm displaying a "select" element using React js. How to pass the value in the select element via the Request(Request $request) variable to the controller? Here is my form in the blade template:

<form method="POST" action="">
        @csrf

    <div id="example" data={{ $currencies }}></div>

    <input type="submit" value="Create" class="btn btn-primary">
</form>

And there is the component:

class Example extends Component {
    render() {
                return(
            <div>
          <select>
            <option></option>
            <option>Currency</option>
            <option>Reputation</option>
          </select>

        </div>
            );

            }
  }

export default Example;

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

Add a name property to the select, url to the form action attribute and submit the form. — DevK
– DevK, Commented Apr 26, 2018 at 14:06

Quezler · Accepted Answer · 2018-04-26 14:16:32Z

1

I guess you can simply send or pass the data to laravel route or controller directly . You can use fetch() method or axios() to send the data in post method to the url and catch that in the respective controller. As react component or can say react is only the view of the MVC that there is no way(may be in my knowledge) to pass the data to server side with a api request like fetch() n all.

edited Apr 26, 2018 at 14:16

Quezler

2,41516 silver badges30 bronze badges

answered Apr 26, 2018 at 14:06

Aniketh Saha

91311 silver badges23 bronze badges

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

Comments

Mitesh Tandel · Accepted Answer · 2023-05-03 07:18:35Z

0

Yes, you can do it by using react-select component to load data into the select element like below.

<Select
  options={JSON.parse(data)}
/>

Data must be in JSON format to display in react-select component. Example data is as follows,

[
  {
    "value": "inr",
    "label": "Indian Rupees"
  },
  {
    "value": "usd",
    "label": "United States Dollars"
  },
  {
    "value": "aud",
    "label": "Australian Dollars"
  }
]

You can also use simple select element and loop through data to add options into the select element.

answered May 3, 2023 at 7:18

Mitesh Tandel

437 bronze badges

Collectives™ on Stack Overflow

Passing data from React component to Laravel controller

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related