title: How to dynamically update the components in ReactJS
body: <p>I am new to React and I don't know how to overcome the below situation.</p>
  <p>Let say I have to display a table.In Table <code>&lt;td&gt;</code> i have one dropdown which I got from my child component.And also have some <code>&lt;div&gt;</code> next to the dropdown.</p>
  <p>So,for each dropdown change, i have to bind some html into that <code>&lt;div&gt;</code>.Below line is working for very first dropdown change.</p>
  <pre><code>ReactDOM.render(myHtml, document.getElementById(myID));
  </code></pre>
  <p>So For a second time it is not render the new html.</p>
  <p>Kindly correct me If I did anything wrong and give me some suggestion to overcome the above issue.</p>
  <p>Thanks in Advance.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Home extends Component{
  state = {   
        tableDetails:'',   
     };
     
  LoadTableDetails = () =&gt; {     
    const getUrl = "Some API Url"; 
    let dd=  fetch(getUrl);
    dd.then(response =&gt; {
      return response.json();
    }).then(items =&gt; {     
     var body = this.getTableBody(items);  
     this.setTableDetails(body);
    });
  }
  
  getTableBody(items){ 
    let body ;   
        if(items != null){
           body = items.map((folder,index) =&gt;
          &lt;tr key={index}&gt;
            &lt;td&gt;{folder.FolderName}&lt;/td&gt;
            &lt;td&gt;
            &lt;MyDropDown fileNames={folder.FileNames} folderFiles={folder.FolderFiles} id={folder.FolderName.replace(/ /g,'_')} setSelectedFile = {this.setSelectedFile}/&gt;   // Here I get dropdown selected value and see setSelectedFile method       
            &lt;/td&gt;
            &lt;td&gt;
            &lt;div id={folder.FolderName.replace(/ /g,'_')}&gt;
            
            ////I need some html here based on the above dropdown change
                         &lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
        );
        }
        return folderItems;
  }
  
  setTableDetails(body){
   let dd = (&lt;div className="container" &gt;
     &lt;h2 class="text-center"&gt;Server Details&lt;/h2&gt;
     &lt;table class="table"&gt;
        &lt;thead class="thead-dark"&gt;
           &lt;tr&gt;
              &lt;th scope="col"&gt;Folder&lt;/th&gt;
              &lt;th scope="col"&gt;Config Files&lt;/th&gt;
              &lt;th scope="col"&gt;Config Section&lt;/th&gt;
              &lt;th scope="col"&gt;App Settings&lt;/th&gt;
           &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
           {body}
        &lt;/tbody&gt;
     &lt;/table&gt;
  &lt;/div&gt;);
  this.setState({tableDetails:dd});
  }
     
  setSelectedFile = (val) =&gt;{
    
    const getUrl = 'my url';
    let loadItems = fetch(getUrl);
    loadItems.then(response=&gt;{
     return response.json();
    }).then(data=&gt;{    
      let configHtml = (    
        &lt;div&gt;
        &lt;MyDropDown fileNames={data} id={val.id + path.replace('\\','_').replace('/\//g','_')} path={path} setSelectedFile = {this.getConfigSectionDetails}/&gt;
        &lt;div className="mt-4" id={val.id + path.replace('\\','_').replace('/\//g','_')}&gt;
         
         &lt;/div&gt;
        &lt;/div&gt; 
      );
     let id = val.id; //This is the id where my new 
      ReactDOM.render(configHtml, document.getElementById(id)); //this line is working for my first dropdown change.If I change the dropdown again then it is not rerenered
    });
   }   
     
   render(){       
          return (
          &lt;div class="mt-4"&gt;
           &lt;div class="input-group-append"&gt;
      &lt;button class="btn btn-info" type="button" onClick={this.LoadTableDetails}&gt;Load Table Details&lt;/button&gt;
    &lt;/div&gt;
            {this.state.tableDetails}    
            &lt;/div&gt;
            );
      }
  
  }
  
  
  
  export default Home;</code></pre>
  </div>
  </div>
  </p>