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

Aniketh Saha Aniketh Saha · Accepted Answer · 2018-04-26T14:06:29

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.

Passing data from React component to Laravel controller

1 Answers