ReactJS）PHPからXMLHttpRequestを使用してデータを取得し、そのデータを兄弟コンポーネント内にレンダリングする方法

私は現在、ReactJSWebアプリケーションを開発しています。

JQueryは使用されません。

ReactJSがonTouchEndイベントをトリガーすると、ReactJSはXMLHttpRequestを私のphpサーバーに送信します。PHPはMYSQLデータベースをループします。その後、データベースのループが成功した場合、PHPはHTMLデータをjavascript AND！に送信します。これらのHTMLデータを兄弟コンポーネント内にレンダリングします。

export default class ItemList extends React.Component{
state={
    isScrolled:''
}
handleClick = (e)=>{
    e.stopPropagation();
    console.log(e.currentTarget.id);
    console.log('click '+e.target.id);
}
handleTouchStart = (e)=>{
    console.log('touch start '+e.currentTarget.id);
}
handleTouchMove = (e)=>{
    console.log('touch move'+e.target.id);
    this.setState({
        isScrolled:'scrolled'
    })
}
handleTouchEnd = (e)=>{
    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(
        <section id="Main">
            <Continents 
                onClick={this.handleClick} 
                onTouchStart={this.handleTouchStart}
                onTouchMove={this.handleTouchMove}
                onTouchEnd={this.handleTouchEnd}
            />
            <Countries/>
        </section>
    )
 }
}

class Continents extends React.Component{
render(){
    return(
        <div className="items">
            <div id="Continent1" {...this.props} data-continent="Europe" className="continents">
                <figure>    
                    <img src="img/london.jpg"/>
                    <figcaption>EUROPE</figcaption>
                </figure>
            </div>
            <div id="Continent2" {...this.props} data-continent="Asia" className="continents" >
                <figure>
                    <img src="img/korea.jpg"/>
                    <figcaption>ASIA</figcaption>
                </figure>
            </div>
            <div id="Continent3" {...this.props} data-continent="North America" className="continents">
                <figure>
                    <img src="img/grandcanyon.jpg"/>
                    <figcaption>NORTH AMERICA</figcaption>
                </figure>
            </div>
            <div id="Continent4" {...this.props} data-continent="South America" className="continents">
                <figure>
                    <img src="img/brazilRio.jpg"/>
                    <figcaption>SOUTH AMERICA</figcaption>
                </figure>
            </div>
            <div id="Continent5" {...this.props} data-continent="Africa" className="continents">
                <figure>
                    <img src="img/africaWild.jpg"/>
                    <figcaption>AFRICA</figcaption>
                </figure>
            </div>
            <div id="Continent6" {...this.props} data-continent="Oceania" className="continents">
                <figure>
                    <img src="img/aukland.jpg"/>
                    <figcaption>OCEANIA</figcaption>
                </figure>
            </div>
        </div>
    )
  }
}

class Countries extends React.Component{
render(){
    return('')
}
}

これはajaxRequest関数です

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();
}

xhr.onreadystatechangeのconsole.logで取得したもの

<div>England</div><div>Italy</div><div>Germany</div><div>Sweden</div><div>Russia</div><div>Czech Republic</div><div>Poland</div><div>Greece</div><div>Netherlands</div><div>Spain</div><div>Portugal</div><div>France</div>

国コンポーネントでこれらすべてのdivをレンダリングする場合はどうすればよいですか？私の場合、reduxを使用する必要がありますか？最良の方法は何ですか？

英語が下手でごめんなさい。英語を母国語としない。