title: ReactJS) how to get data with XMLHttpRequest from PHP and render that data inside sibling component
body: <p>I am currently developing a ReactJS web application.</p>
  
  <p>No JQuery is used.</p>
  
  <p>When ReactJS triggers onTouchEnd event, ReactJS will send XMLHttpRequest to my php server. PHP will loop through MYSQL database. After that, if looping through database was successful, PHP will send HTML data to javascript AND! I WILL RENDER THESE HTML DATAS INSIDE SIBLING COMPONENT. </p>
  
  <pre><code>export default class ItemList extends React.Component{
  state={
      isScrolled:''
  }
  handleClick = (e)=&gt;{
      e.stopPropagation();
      console.log(e.currentTarget.id);
      console.log('click '+e.target.id);
  }
  handleTouchStart = (e)=&gt;{
      console.log('touch start '+e.currentTarget.id);
  }
  handleTouchMove = (e)=&gt;{
      console.log('touch move'+e.target.id);
      this.setState({
          isScrolled:'scrolled'
      })
  }
  handleTouchEnd = (e)=&gt;{
      const continent = e.currentTarget.getAttribute('data-continent');
      if(this.state.isScrolled=='scrolled'){
          console.log('nothing happens');
      }else{
          console.log('event worked');
          ajaxRequest(e.currentTarget.className,continent);
      }
      this.setState({
          isScrolled:''
      })
  }
  render(){
      return(
          &lt;section id="Main"&gt;
              &lt;Continents 
                  onClick={this.handleClick} 
                  onTouchStart={this.handleTouchStart}
                  onTouchMove={this.handleTouchMove}
                  onTouchEnd={this.handleTouchEnd}
              /&gt;
              &lt;Countries/&gt;
          &lt;/section&gt;
      )
   }
  }
  
  class Continents extends React.Component{
  render(){
      return(
          &lt;div className="items"&gt;
              &lt;div id="Continent1" {...this.props} data-continent="Europe" className="continents"&gt;
                  &lt;figure&gt;    
                      &lt;img src="img/london.jpg"/&gt;
                      &lt;figcaption&gt;EUROPE&lt;/figcaption&gt;
                  &lt;/figure&gt;
              &lt;/div&gt;
              &lt;div id="Continent2" {...this.props} data-continent="Asia" className="continents" &gt;
                  &lt;figure&gt;
                      &lt;img src="img/korea.jpg"/&gt;
                      &lt;figcaption&gt;ASIA&lt;/figcaption&gt;
                  &lt;/figure&gt;
              &lt;/div&gt;
              &lt;div id="Continent3" {...this.props} data-continent="North America" className="continents"&gt;
                  &lt;figure&gt;
                      &lt;img src="img/grandcanyon.jpg"/&gt;
                      &lt;figcaption&gt;NORTH AMERICA&lt;/figcaption&gt;
                  &lt;/figure&gt;
              &lt;/div&gt;
              &lt;div id="Continent4" {...this.props} data-continent="South America" className="continents"&gt;
                  &lt;figure&gt;
                      &lt;img src="img/brazilRio.jpg"/&gt;
                      &lt;figcaption&gt;SOUTH AMERICA&lt;/figcaption&gt;
                  &lt;/figure&gt;
              &lt;/div&gt;
              &lt;div id="Continent5" {...this.props} data-continent="Africa" className="continents"&gt;
                  &lt;figure&gt;
                      &lt;img src="img/africaWild.jpg"/&gt;
                      &lt;figcaption&gt;AFRICA&lt;/figcaption&gt;
                  &lt;/figure&gt;
              &lt;/div&gt;
              &lt;div id="Continent6" {...this.props} data-continent="Oceania" className="continents"&gt;
                  &lt;figure&gt;
                      &lt;img src="img/aukland.jpg"/&gt;
                      &lt;figcaption&gt;OCEANIA&lt;/figcaption&gt;
                  &lt;/figure&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
    }
  }
  
  class Countries extends React.Component{
  render(){
      return('')
  }
  }
  </code></pre>
  
  <p>this is ajaxRequest function</p>
  
  <pre><code>export default function ajaxRequest(e,value){
  let xhr;
  if(window.XMLHttpRequest){
      xhr = new XMLHttpRequest();
  }else{
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if(typeof(e.target)!='undefined'){
      switch(e.target.className){
          case 'search':
          xhr.open('get','//localhost:80/ReactStudy/travelReduxApp/public/server/search.php?search=' + value,true);
      }
  }else{
      switch(e){
          case 'continents':
              xhr.open('get','//localhost:80/ReactStudy/travelReduxApp/public/server/itemList.php?continent='+value ,true);
      }
  }
  xhr.onreadystatechange = function(data){
      switch(xhr.status){
          case 200:
              const text = xhr.responseText;
              console.log(text);
      }
  }
  if(xhr.readyState===XMLHttpRequest.DONE){
      xhr.abort();
  }
  xhr.send();
  }
  </code></pre>
  
  <p>What I get in console.log in xhr.onreadystatechange</p>
  
  <pre><code>&lt;div&gt;England&lt;/div&gt;&lt;div&gt;Italy&lt;/div&gt;&lt;div&gt;Germany&lt;/div&gt;&lt;div&gt;Sweden&lt;/div&gt;&lt;div&gt;Russia&lt;/div&gt;&lt;div&gt;Czech Republic&lt;/div&gt;&lt;div&gt;Poland&lt;/div&gt;&lt;div&gt;Greece&lt;/div&gt;&lt;div&gt;Netherlands&lt;/div&gt;&lt;div&gt;Spain&lt;/div&gt;&lt;div&gt;Portugal&lt;/div&gt;&lt;div&gt;France&lt;/div&gt;
  </code></pre>
  
  <p>what should I do if I want render all these divs in Countries component? 
  Should I use redux in my case?
  What is the best way? </p>
  
  <p>Sorry for my poor english. Not a native english speaker. </p>