title: Cannot able to Access Data passed as argument from one component to another in ReactJs
body: <p>In my scenario, I have two components ListEnterprise and AddEnterprise. On clicking the update button I need to access and send the particular Id of Enterprise to AddEnterprise(we are using same component for adding and updating the records). How to access the EnterpriseId in AddEnterprise component? Thanks in advance.</p>
  
  <p><strong>ListEnterprise</strong></p>
  
  <pre><code>class ListEnterprises extends Component {
  
  
      constructor(props) {
          super(props);
          this.state = {
              isLoading: true,
              enterprises: [],
              message: null,
              showFormMessage: false,
              showUpdateForm: false,
          }
          //Any method in a react component should be bound to this
          this.refreshEnterprises = this.refreshEnterprises.bind(this);
          this.editEnterprise = this.editEnterprise.bind(this);
      }
  
      // After all the elements of the page is rendered correctly, this method is called.
      // After the markup is set on the page, this technique called by React itself to either fetch the data from An External API or perform some unique operations which need the JSX.API
      // componentDidMount() method is the perfect place, where we can call the setState() method to change the state of our application and render() the updated data loaded JSX. For example, we are going to fetch any data from an API then API call should be placed in this lifecycle method,
      // and then we get the response, we can call the setState() method and render the element with updated data.
      //React defines a component lifecycle. componentDidMount will be called as soon as the component is mounted. We are calling refreshCourses as soon as a component is mounted.
      componentDidMount() {
          this.refreshEnterprises();
      }
  
      _showMessage = (bool, update = false) =&gt; {
          this.setState({
              showFormMessage: bool,
              showUpdateForm: false,
          });
  
          if (update) {
              this.refreshEnterprises();
          }
      }
  
      refreshEnterprises() {
          EnterpriseService.retrieveAllEnterprises()
              .then((response) =&gt; {
                  console.log(response.data);
                  this.setState({ enterprises: response.data, isLoading: false });
              }).catch((error) =&gt; {
                  console.log(error);
              });
      }
  
      // removeEnterprise(id) {
      //     EnterpriseService.deleteEnterprise(id)
      //         .then((response) =&gt; {
      //             console.log(response.data);
      //             let updatedEnterprises = [...this.state.enterprises].filter(i =&gt; i.id !== id);
      //             this.setState({ enterprises: updatedEnterprises });
      //         }).catch((error) =&gt; {
      //             console.log(error);
      //         });
      // }
  
      editEnterprise(enterpriseId) {
          this._showMessage.bind(null, false);
          this.setState({ showUpdateForm: true, showFormMessage: false });
          return enterpriseId;
      }
  
      render() {
          console.log("Rendering Enterprises");
  
          if (this.state.showUpdateForm)
              let recordId = this.editEnterprise;
  
  
          if (this.state.isLoading)
              return (&lt;div&gt;Loading...&lt;/div&gt;);
  
          return (
              &lt;div key={this.props.location.pathname}&gt;
                  &lt;NavigationComponent /&gt;&lt;br /&gt;&lt;br /&gt;
                  &lt;h3 align="center"&gt;Here are all your Enterprises&lt;/h3&gt;&lt;br /&gt;
                  {this.state.message &amp;&amp; &lt;div class="alert alert-success"&gt;{this.state.message}&lt;/div&gt;}
                  &lt;Container&gt;
                      &lt;Table striped bordered hover size="sm"&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Enterprise&lt;/th&gt;
                                  &lt;th&gt;Industry&lt;/th&gt;
                                  &lt;th&gt;Business Units&lt;/th&gt;
                                  &lt;th&gt;Description&lt;/th&gt;
                                  &lt;th&gt;Update&lt;/th&gt;
                                  &lt;th&gt;Delete&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                              {
                                  this.state.enterprises.map(
                                      enterprise =&gt;
                                          &lt;tr key={enterprise.id}&gt;
                                              &lt;td&gt;{enterprise.enterpriseName}&lt;/td&gt;
                                              &lt;td&gt;{enterprise.industry}&lt;/td&gt;
                                              &lt;td&gt;
                                                  {enterprise.businessUnits.map(bu =&gt;
                                                      &lt;td&gt;{bu.businessUnitName}&lt;/td&gt;
                                                  )}
                                              &lt;/td&gt;
                                              &lt;td&gt;{enterprise.description}&lt;/td&gt;
                                              &lt;td&gt;&lt;button className="btn btn-warning" onClick={() =&gt; this.editEnterprise(enterprise.id)}&gt;Update&lt;/button&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;button className="btn btn-danger" onClick={() =&gt; this.removeEnterprise(enterprise.id)}&gt;Delete&lt;/button&gt;&lt;/td&gt;
                                          &lt;/tr&gt;
                                  )
                              }
                          &lt;/tbody&gt;
                      &lt;/Table&gt;
                  &lt;/Container&gt;{" "}{" "}{" "}
  
                  &lt;div className="container"&gt;
                      &lt;Button color="primary" size="lg" onClick={this._showMessage.bind(null, true)}&gt;Add Enterprise&lt;/Button&gt;{' '}
                      &lt;Button color="secondary" size="lg" onClick={this._showMessage.bind(null, false)}&gt;Hide&lt;/Button&gt;{' '}
                      {(this.state.showFormMessage &amp;&amp; &lt;AddEnterprise showMessage={this._showMessage} {...this.props} /&gt;)}
                      {(this.state.showUpdateForm &amp;&amp; &lt;AddEnterprise editEnterprise={this.editEnterprise} showUpdateForm={this.state.showUpdateForm} showMessage={this._showMessage} {...this.props} /&gt;)}
                  &lt;/div&gt;
                  &lt;br /&gt;&lt;br /&gt;
                  &lt;FooterComponent /&gt;
              &lt;/div &gt;
          );
      }
  }
  
  export default ListEnterprises;
  </code></pre>
  
  <p><strong>AddEnterprise</strong>(Same component is Using to Update as well)</p>
  
  <pre><code>class AddEnterprise extends Component {
  
      emptyEnterprise = {
          enterpriseName: "",
          industry: "",
          description: "",
          businessUnits: ""
      };
  
      constructor(props) {
          super(props);
  
          this.state = {
              isLoading: true,
              isForm: false,
              enterprisePayload: this.emptyEnterprise
          }
  
          this.handleChange = this.handleChange.bind(this);
          this.addEnterprise = this.addEnterprise.bind(this);
          this.editEnterprise = this.editEnterprise.bind(this);
      }
  
      handleChange(event) {
          const target = event.target;
  
          const value = target.value;
          const name = target.name;
  
          let updatedEnterprisePayload = { ...this.state.enterprisePayload };
          updatedEnterprisePayload[name] = value;
          this.setState({ enterprisePayload: updatedEnterprisePayload });
          console.log(updatedEnterprisePayload);
      }
  
      editEnterprise() {
          this.props.editEnterprise();
      }
  
      addEnterprise(event) {
          var obj = [];
          const businessUnitsData = this.state.enterprisePayload.businessUnits.split(",");
          console.log(businessUnitsData);
          businessUnitsData.map(x =&gt; {
              let objVar = new BusinessUnit("", x);
              console.log(objVar);
              obj.push(objVar);
          });
  
          console.log(obj);
          let updatedPayload = this.state.enterprisePayload;
          updatedPayload["businessUnits"] = obj;
          this.setState({ enterprisePayload: updatedPayload });
  
          const payload = this.state.enterprisePayload;
  
          EnterpriseService.addEnterprise(payload)
              .then((response) =&gt; {
                  this.setState({ isLoading: false, isForm: true });
                  this.props.showMessage(false, true); //In React we use state for things like these, you can't always redirect
              })
              .catch((error) =&gt; {
                  console.log(error);
              });
      }
  
      render() {
  
          if (this.state.isLoading &amp;&amp; this.state.isForm)
              return (&lt;div&gt;Loading...&lt;/div&gt;);
  
          return (
              &lt;div className="base-container"&gt;
                  {!this.props.showUpdateForm &amp;&amp; &lt;div className="header"&gt;&lt;div&gt;&lt;br /&gt;Add Enterprise&lt;/div&gt;&lt;/div&gt;}
                  {this.props.showUpdateForm &amp;&amp; &lt;div className="header"&gt;&lt;div&gt;&lt;br /&gt;Update Enterprise&lt;/div&gt;&lt;/div&gt;}
                  &lt;div className="content"&gt;
                      &lt;div className="form"&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="enterpriseName" for="enterpriseName"&gt;Enterprise Name&lt;/label&gt;
                              &lt;input type="text" name="enterpriseName" id="enterpriseName" placeholder="enterpriseName" onChange={this.handleChange} /&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="industry" for="industry"&gt;Industry&lt;/label&gt;
                              &lt;input type="text" name="industry" id="industry" placeholder="industry" onChange={this.handleChange} /&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="businessUnits" for="businessUnits"&gt;Business Units&lt;/label&gt;
                              &lt;input type="text" name="businessUnits" id="businessUnits" placeholder="businessUnits" onChange={this.handleChange} /&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="description" for="description"&gt;Description&lt;/label&gt;
                              &lt;input type="text" name="description" id="description" placeholder="description" onChange={this.handleChange} /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="footer"&gt;
                      {!this.props.showUpdateForm &amp;&amp; &lt;button type="button" className="btn" onClick={this.addEnterprise}&gt;Add&lt;/button&gt;}
                      {this.props.showUpdateForm &amp;&amp; &lt;button type="button" className="btn" onClick={this.editEnterprise}&gt;Update&lt;/button&gt;}
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default AddEnterprise;
  </code></pre>