How to dynamically update the components in ReactJS

I am new to React and I don’t know how to overcome the below situation.

Let say I have to display a table.In Table <td> i have one dropdown which I got from my child component.And also have some <div> next to the dropdown.

So,for each dropdown change, i have to bind some html into that <div>.Below line is working for very first dropdown change.

ReactDOM.render(myHtml, document.getElementById(myID));

So For a second time it is not render the new html.

Kindly correct me If I did anything wrong and give me some suggestion to overcome the above issue.

Thanks in Advance.

class Home extends Component{
state = {   
      tableDetails:'',   
   };
   
LoadTableDetails = () => {     
  const getUrl = "Some API Url"; 
  let dd=  fetch(getUrl);
  dd.then(response => {
    return response.json();
  }).then(items => {     
   var body = this.getTableBody(items);  
   this.setTableDetails(body);
  });
}

getTableBody(items){ 
  let body ;   
      if(items != null){
         body = items.map((folder,index) =>
        <tr key={index}>
          <td>{folder.FolderName}</td>
          <td>
          <MyDropDown fileNames={folder.FileNames} folderFiles={folder.FolderFiles} id={folder.FolderName.replace(/ /g,'_')} setSelectedFile = {this.setSelectedFile}/>   // Here I get dropdown selected value and see setSelectedFile method       
          </td>
          <td>
          <div id={folder.FolderName.replace(/ /g,'_')}>
          
          ////I need some html here based on the above dropdown change
                       </div>
          </td>
          <td></td>
        </tr>
      );
      }
      return folderItems;
}

setTableDetails(body){
 let dd = (<div className="container" >
   <h2 class="text-center">Server Details</h2>
   <table class="table">
      <thead class="thead-dark">
         <tr>
            <th scope="col">Folder</th>
            <th scope="col">Config Files</th>
            <th scope="col">Config Section</th>
            <th scope="col">App Settings</th>
         </tr>
      </thead>
      <tbody>
         {body}
      </tbody>
   </table>
</div>);
this.setState({tableDetails:dd});
}
   
setSelectedFile = (val) =>{
  
  const getUrl = 'my url';
  let loadItems = fetch(getUrl);
  loadItems.then(response=>{
   return response.json();
  }).then(data=>{    
    let configHtml = (    
      <div>
      <MyDropDown fileNames={data} id={val.id + path.replace('\','_').replace('///g','_')} path={path} setSelectedFile = {this.getConfigSectionDetails}/>
      <div className="mt-4" id={val.id + path.replace('\','_').replace('///g','_')}>
       
       </div>
      </div> 
    );
   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 (
        <div class="mt-4">
         <div class="input-group-append">
    <button class="btn btn-info" type="button" onClick={this.LoadTableDetails}>Load Table Details</button>
  </div>
          {this.state.tableDetails}    
          </div>
          );
    }

}



export default Home;

Answer

I got my Answer.We have to use our states to update the values and not html.

class Home extends Component{
state = {   
      tableDetails:'',   
      dropdownDetails:''
   };
   
LoadTableDetails = () => {     
  const getUrl = "Some API Url"; 
  let dd=  fetch(getUrl);
  dd.then(response => {
    return response.json();
  }).then(items => {     
  
  this.setState({
  tableDetails:items
  });   
  
  });
}

getTableDetails = (items)=>{
return (<div className="container" >
   <h2 class="text-center">Server Details</h2>
   <table class="table">
      <thead class="thead-dark">
         <tr>
            <th scope="col">Folder</th>
            <th scope="col">Config Files</th>
            <th scope="col">Config Section</th>
            <th scope="col">App Settings</th>
         </tr>
      </thead>
      <tbody>
         {
         items.map((folder,index) =>{
       return (<tr key={index}>
          <td>{folder.FolderName}</td>
          <td>
          <MyDropDown fileNames={folder.FileNames} folderFiles={folder.FolderFiles} id=index setSelectedFile ={this.setSelectedFile}/>          
          </td>
          <td>
          <div>
          
          {this.getConfigHtml(this.state.dropdownDetails)}
                       </div>
          </td>
          <td></td>
        </tr>)
      })
         }
      </tbody>
   </table>
</div>);
}


getConfigHtml =(val)=>{
 return (    
      <div>
      <MyDropDown fileNames={val.data} path={val.path} setSelectedFile = {this.getConfigSectionDetails}/>
      
      </div> 
    );
}

   
setSelectedFile = (val) =>{
  
  const getUrl = 'my url';
  let loadItems = fetch(getUrl);
  loadItems.then(response=>{
   return response.json();
  }).then(data=>{    
  let val={
  data:data,
  path:val.path
  };
  this.setState({dropdownDetails:val});
   
 
  });
 }   
   
 render(){       
        return (
        <div class="mt-4">
         <div class="input-group-append">
    <button class="btn btn-info" type="button" onClick={this.LoadTableDetails}>Load Table Details</button>
  </div>
  {this.getTableDetails(this.state.tableDetails)}
         
          </div>
          );
    }

}



export default Home;