title: ReactJS - Pass post data to the server
body: <h2>Introduction</h2>
  
  <p>A am a beginner with ReactJS and I've tried send one single form data to the php Laravel Controller with method POST, I am using fetch (whatwg-fetch) for server-side rendering and rendering from server to client with method GET works fine.</p>
  
  <h2>Error</h2>
  
  <p>I am was getting error from console: <code>POST http://localhost:8000/boss 405 (Method Not Allowed)</code>, after the clicking "Submit Button" and the page reloading - Fetch loading is not successful. </p>
  
  <h2>Code</h2>
  
  <p>root.jsx</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import Example from './components/Example';
  import Navigation from './components/Navigation';
  import Trigger from './components/Trigger';
  import BossInfo from './components/BossInfo';
  
  const DOM = document.getElementById('example');
  
  
  if (document.getElementById('example')) {
  ReactDOM.render(
          &lt;div&gt;
  
                  &lt;Navigation/&gt;,
              &lt;div className="container"&gt;
                  &lt;BossInfo/&gt;
                  &lt;Trigger/&gt;,
                  &lt;Example /&gt;
              &lt;/div&gt;
          &lt;/div&gt;,
  DOM);
  }
  </code></pre>
  
  <p>BossInfo.jsx</p>
  
  <pre><code>import React from 'react';
  import 'whatwg-fetch';
  
  
  export default class BossTable extends React.Component {
  
  constructor(props) {
      super(props);
      this.state = {
          boss: {}
      };
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  
  
  componentDidMount() {
      this.fetchData('http://localhost:8000/boss');
  }
  
  
  fetchData = (url) =&gt; {
  
      fetch(url)
          .then(response =&gt; {
              console.log(response);
              if (response.ok) {
                  return response.json();
              }
          })
          .then((data) =&gt; {
              console.log(data);
              this.setState(() =&gt; {
                  return {boss: data}
              });
          })
          .catch(function (error) {
              console.log(error);
          });
  };
  
  
  handleChange = (event) =&gt; {
      let value = event.target.value;
  
  
  
      this.setState({
          boss:
              {
                  id: 1,
                  nazev: value,
                  hp: "",
                  mhp: "",
                  mp: "",
                  mmp: "",
                  zasah: "",
                  vyhnuti: "",
                  zbroj: "",
                  poskozeni: "",
                  schopnost1: "",
                  schopnost2: "",
                  schopnost3: "",
                  schopnost4: "",
                  schopnost5: "",
              }
  
      });
  
  };
  
  
  handleSubmit = (event) =&gt; {
      event.preventDefault();
  
      const {boss}  = this.state;
  
      let url = 'http://localhost:8000/boss';
  
  
      let fetchData = {
          method: 'POST',
          body: boss,
          headers: new Headers()
      };
  
  
      fetch(url, fetchData)
      .then( response =&gt; {
          console.log("************Response*****************");
          this.fetchData(url);
  
          if(response.status.code === 404){
              console.log("Chyba: Objekt nenalezen.");
          }
  
      })
  
  
  };
  
  render() {
      const {boss}  = this.state;
      if (!boss) {
          return &lt;div&gt;Loading...&lt;/div&gt;
      }
  
      console.log(boss);
      return (
          &lt;div&gt;
             &lt;form id="formular" onSubmit={this.handleSubmit}&gt;
                  &lt;label&gt;
                      Name:
                      &lt;input type="text" required value={boss.nazev} onChange={this.handleChange} /&gt;
                      &lt;/label&gt;
                      &lt;input type="submit"  placeholder='Send message'/&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      );
  }
  }
  </code></pre>
  
  <p>web.php</p>
  
  <pre><code>&lt;?php
  
  Route::get('/', function () {
  return view('index');
  });
  
  Route::get('boss', 'HomeController@index');
  
  Route::post('data', 'HomeController@update');
  </code></pre>
  
  <p>HomeController.php</p>
  
  <pre><code>&lt;?php
  
  namespace App\Http\Controllers;
  
  use Illuminate\Http\Request;
  use App\Models\Boss;
  
  
  class HomeController extends Controller
  {
  
  public function index()
  {
      $boss = Boss::find(1);
      return response()-&gt;json($boss);
  
  }
  
  /**
   * Show the form for creating a new resource.
   *
   * @return \Illuminate\Http\Response
   */
  public function create()
  {
      //
  }
  
  /**
   * Store a newly created resource in storage.
   *
   * @param  \Illuminate\Http\Request  $request
   * @return \Illuminate\Http\Response
   */
  public function store(Request $request)
  {
  
      //$bossOld = Boss::find(1);
  
  
  }
  
  /**
   * Display the specified resource.
   *
   * @param  int  $id
   * @return \Illuminate\Http\Response
   */
  public function show($id)
  {
      //
  }
  
  /**
   * Show the form for editing the specified resource.
   *
   * @param  int  $id
   * @return \Illuminate\Http\Response
   */
  public function edit($id)
  {
      //
  }
  
  /**
   * Update the specified resource in storage.
   *
   * @param  \Illuminate\Http\Request  $request
   * @param  int  $id
   * @return \Illuminate\Http\Response
   */
  public function update(Request $request)
  {
      $id = $request-&gt;post('id');
      $boss = Boss::find($id);
      $boss-&gt;nazev = $request-&gt;post('nazev');
      $boss-&gt;save();
  
      return response()-&gt;json('Successfully Updated');
  }
  
  /**
   * Remove the specified resource from storage.
   *
   * @param  int  $id
   * @return \Illuminate\Http\Response
   */
  public function destroy($id)
  {
      //
  }
  }
  </code></pre>