title: React call a component with onclick
body: <h1>Hi all great programmers</h1>
  
  <h1>thanks for reading my question</h1>
  
  <h1>. My problem in react library is I want to call another component by one click.</h1>
  
  <h1>if you see code I have provided the necessary explanations with //*******</h1>
  
  <pre><code>&lt;pre&gt;class CategoryList extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          id: 0, name: "", title: "", description: "", subTitle: "", imagePath: "", tags: "",
          data: [],
          pageInfo: []
      };
  }
  
  componentDidMount() {
  // read data is ok
  }
  
  renderCategories() {
  // this function is ok
          return this.state.data.map(category =&gt; {
              return (
                  &lt;tr id={"one-row-" + category.id} key={category.id}&gt;
                      &lt;td&gt;{category.id}&lt;/td&gt;
                      &lt;td&gt;{category.name}&lt;/td&gt;
                      &lt;td&gt;{category.title}&lt;/td&gt;
                      &lt;td&gt;{category.description}&lt;/td&gt;
                      &lt;td&gt;
                          &lt;a className="btn btn-primary btn-sm" data-toggle="modal" href="#edit-modal" title="EDIT" onClick={(e) =&gt; this.editCategory(category)}&gt;
  
                          EDIT&lt;/a&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          )
      })
  }
  
  render() {
  // this function is ok
          var ReturnView =
              &lt;div&gt;
                  &lt;h1 className="text-center"&gt;Categories&lt;/h1&gt;
                  &lt;hr /&gt;
              &lt;table className="table table-bordered table-striped table-hovered table-sortable"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;id&lt;/th&gt;
                          &lt;th&gt;name&lt;/th&gt;
                          &lt;th&gt;title&lt;/th&gt;
                          &lt;th&gt;desc&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
  
                  &lt;tbody&gt;
                      {this.renderCategories()}
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      return (
          ReturnView
      );
  }
  
  
  editCategory(category) {
      this.setState({
          id: category.id,
          name: category.name,
          title: category.title,
          description: category.description,
          subTitle: category.subTitle,
          imagePath: category.imagePath,
          tags: category.tags,
      }, function () {
  
  // ***************** All My Problems is here *********************
   Category Edit  Component must call here 
          });
      }
  }
  
  ReactDOM.render(
      &lt;CategoryList subreddit="catgories" /&gt;,
      document.getElementById('root')
  );
  </code></pre>
  
  <p>the second component is here and i need call that and send parameters into that category edit component for rendering:</p>
  
  <pre><code>    class CategoryEdit extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              id, name, title, description, subTitle, imagePath, tags
          };
      }
  
      componentDidMount() {
    //READ DATA FROM SERVER and work
      }
  
      render() {
          return (
             // CREATE UI and work
          )
      }
  
      editRow() {
          var id = this.state.id;
          var name = $("#edit-name").val();
          var title = $("#edit-title").val();
          var description = $("#edit-description").val();
          var subTitle = $("#edit-subTitle").val();
          var imagePath = $("#edit-imagePath").val();
          var tags = $("#edit-tags").val();
          $.ajax({
              url: "http://localhost:49384/api/CategoryEdit",
              method: "POST",
              data: {"Id":id, "Name": name, "Title": title, "Description": description, "SubTitle": subTitle, "ImagePath": imagePath, "Tags": tags },
              dataType: "json",
              success: function (result) {
                  if (result != null) {
                      alert(result.message);
                      if (result.isSuccess === true) {
                          this.setState({
                              id: id, name: name, title: title, description: description,
                              subTitle: subTitle, imagePath: imagePath, tags: tags
                          });
                      }
                  }
              }
          });
      }
  }
  
  ReactDOM.render(
      &lt;CategoryEdit /&gt;,
      document.getElementById('pop-up-content')
  )
  </code></pre>
  
  <h1>What I have tried:</h1>
  
  <pre><code>editCategory(category) {
          this.setState({
              id: category.id,
              name: category.name,
              title: category.title,
              description: category.description,
              subTitle: category.subTitle,
              imagePath: category.imagePath,
              tags: category.tags,
          }, function () {
              &lt;CategoryEdit props="this.state" /&gt;
          });
      }
  
  editCategory(category) {
       this.setState({
           id: category.id,
           name: category.name,
           title: category.title,
           description: category.description,
           subTitle: category.subTitle,
           imagePath: category.imagePath,
           tags: category.tags,
       }, function () {
           ReactDOM.render(
               &lt;CategoryEdit props="this.state" /&gt;,
               document.getElementById('pop-up-content')
           );
       });
   }
  </code></pre>