title: Solved : ReactJS : Uncaught TypeError: Cannot read property 'id' of undefined when posting to a Laravel Controller using axios
body: <p>I'm trying to get data and display it as a dynamic selection / option menu using ReactJs, and POST the chosen value to a Laravel controller, so I can't store it as well.</p>
  
  <pre><code>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  import axios from 'axios';
  
  export default class Sm extends Component
  {
      constructor(props)
      {
          super(props);
          this.state = {
              name: '',
              json:JSON.parse(props.data)
          };
  
          this.onChangeValue = this.onChangeValue.bind(this);
          this.onSubmitButton = this.onSubmitButton.bind(this);
      }
  
      onChangeValue(e) {
          this.setState({
              [e.target.name]: e.target.value
          });
      }
  
      onSubmitButton(e) {
          e.preventDefault();
  
          axios.post('/Y', {
              name: this.state.json.id//error : Uncaught TypeError: Cannot read property 'id' of undefined
          })
          .then(function (response) {
              console.log(response.data);
          })
          .catch(function (error) {
              // console.log(error);
              console.log(this.state.json.id);// error: Uncaught TypeError: Cannot read property 'id' of undefined
          });
  
          this.setState({
              name: ''
          })
      }
  
      componentDidMount () {
      }
  
      render()
      {
          return (
              &lt;form onSubmit={this.onSubmitButton}&gt;
                  &lt;select&gt;
                      {this.state.json.map(i =&gt; (
                          &lt;option className="form-control" name="name" value={i.id} onChange={this.onChangeValue}&gt;{i.name}&lt;/option&gt;//the id proprty is working :/
                      ))}
                  &lt;/select&gt;
                  &lt;button className="btn btn-success"&gt;Submit&lt;/button&gt;
              &lt;/form&gt;
          );
      }
  }
  
  if (document.getElementById('sm')) {
      var data = document.getElementById(('sm')).getAttribute('data');
      ReactDOM.render(&lt;Sm data={data}/&gt;, document.getElementById('sm'));
  }
  </code></pre>
  
  <p>everything works fine, but when I post the chosen value, I face this error: Uncaught TypeError: Unable to read the property 'id' of undefined, BUT on the other hand the property id is defined because its functioning I can see that in the <code>&lt;option className="form-control" name="name" value={i.id} onChange={this.onChangeValue}&gt;{i.name}&lt;/option&gt;</code></p>
  
  <p>i even tried <code>this.state.json.i.id</code> and still the same problem.</p>
  
  <p>-Update :My new code:</p>
  
  <pre><code>    import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  import axios from 'axios';
  
  export default class Sm extends Component
  {
      constructor(props)
      {
          super(props);
          this.state = {
              name: '',
              json:JSON.parse(props.data)
          };
  
          this.onChangeValue = this.onChangeValue.bind(this);
          this.onSubmitButton = this.onSubmitButton.bind(this);
      }
  
      onChangeValue(e) {
          this.setState({
              [e.target.name]: e.target.value
          });
      }
  
      onSubmitButton(e) {
          e.preventDefault();
  
          axios.post('/Y', {
              name: this.state.name////500 (Internal Server Error)
          })
          .then(function (response) {
              console.log(response.data);
          })
          .catch(function (error) {
              // console.log(error);
              console.log(this.state.name);//Uncaught (in promise) TypeError: Cannot read property 'state' of undefined
              //console.log(this.state);//Uncaught (in promise) TypeError: Cannot read property 'state' of undefined
              //console.log(this);//undefined
          });
  
          this.setState({
              name: ''
          })
      }
  
      componentDidMount () {
      }
  
      render()
      {
          return (
              &lt;form onSubmit={this.onSubmitButton}&gt;
                  &lt;select&gt;
                      {this.state.json.map(i =&gt; (
                          &lt;option className="form-control" name="name" value={i.id} onChange={this.onChangeValue}&gt;{i.name}&lt;/option&gt;//the id proprty is working :/
                      ))}
                  &lt;/select&gt;
                  &lt;button className="btn btn-success"&gt;Submit&lt;/button&gt;
              &lt;/form&gt;
          );
      }
  }
  
  if (document.getElementById('sm')) {
      var data = document.getElementById(('sm')).getAttribute('data');
      ReactDOM.render(&lt;Sm data={data}/&gt;, document.getElementById('sm'));
  }
  </code></pre>
  
  <p>the code final version :</p>
  
  <pre><code>    import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  import axios from 'axios';
  
  export default class Sm extends Component
  {
      constructor(props)
      {
          super(props);
          this.state = {
              json:JSON.parse(props.data),
              name: ''
          };
  
          this.onChangeValue = this.onChangeValue.bind(this);
          this.onSubmitButton = this.onSubmitButton.bind(this);
      }
  
      onChangeValue(e) {
          this.setState({
              // [e.target.name]: e.target.value
              name: e.target.value
          });
          console.log("Am i working ?");
      }
  
      async onSubmitButton(e) {
          e.preventDefault();
  
          try {
          const response = await axios.post('/Y', {name: this.state.name});
          console.log(response.data);
          } catch (error) {
            console.log(this.state.name);
          }
  
          this.setState(prevState =&gt; ({...prevState, name: ''}));
        }
  
      componentDidMount () {
      }
  
      render()
      {
          return (
              &lt;form onSubmit={this.onSubmitButton}&gt;
                  &lt;select onChange={this.onChangeValue} &gt;
                      {this.state.json.map(i =&gt; (
                          &lt;option className="form-control" name="name" value={i.id}&gt;{i.name}&lt;/option&gt;
                      ))}
                  &lt;/select&gt;
                  &lt;button className="btn btn-success"&gt;Submit&lt;/button&gt;
              &lt;/form&gt;
          );
      }
  }
  
  if (document.getElementById('sm')) {
      var data = document.getElementById(('sm')).getAttribute('data');
      ReactDOM.render(&lt;Sm data={data}/&gt;, document.getElementById('sm'));
  }
  </code></pre>