title: How can I add compoent to another component in React?
body: <p>How can I add component Country.js to component Countries.js</p>
  
  <p>I want to display in browser:</p>
  
  <p>Name: France</p>
  
  <p>Capital: Paris</p>
  
  <p>Name: Russia</p>
  
  <p>Capital: Moscow</p>
  
  <p><strong>//First component Country.js</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  
  class Country extends Component {
      render() {
          const {data} = this.props;
              return (
                &lt;div className = {'countryItem'}&gt;
                  &lt;p className = {'countryLabel'}&gt; 
                      Name:  {{this.props.country.name}}
                  &lt;/p&gt;
                  &lt;p className= {'contactLabel'}&gt; 
                      Capital: {{this.props.country.capital}}
                  &lt;/p&gt;
                &lt;/div&gt;                
             )   
  
          return (
              &lt;div&gt;
                  {Country}
              &lt;/div&gt;
          )
      }
    }
  
  export default Country;
  </code></pre>
  
  <p><strong>//Second component Countries.js</strong> </p>
  
  <pre><code>import React, { Component } from 'react'
  import Country from './Country';
  
  
  
  class Countries extends Component {
      render() {
          const {data} = this.props;
          const Countries = data.map(country =&gt; {
              return (
                  &lt;li key = {country.id}&gt;
                      &lt;h2&gt;{country.name}&lt;/h2&gt;
                      &lt;p&gt;{country.capital}&lt;/p&gt;
                  &lt;/li&gt;                  
              )   
          })
          return (
              &lt;ul&gt;
                  {Countries}
              &lt;/ul&gt;
          )
      }
  }
  
  export default Countries;
  </code></pre>
  
  <p><strong>//Data.js</strong></p>
  
  <pre><code>export default  [       
          {
             id: 1,
             Name: 'France',
             Capital: 'Paris
          },
          {
             id: 2,
             Name: 'Russia',
             Capital: 'Moscow'
          }]
  </code></pre>
  
  <p><strong>//HTML</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>//App.js</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import CountryForm from './components/CountryForm';
  import Countries from './components/Countries';
  
  
  
  class App extends Component {
      render() {      
          return (            
              &lt;div&gt;
                  &lt;div&gt;&lt;CountryForm /&gt;&lt;/div&gt;
                  &lt;div&gt;&lt;Countries data={this.props.data}/&gt;&lt;/div&gt;
              &lt;/div&gt;      
          )
      }
  }
  
  export default App;
  </code></pre>
  
  <p><strong>//script.js</strong></p>
  
  <pre><code>var app = React.createElement(App);
  ReactDOM.render(app, document.getElementById('app'));
  </code></pre>
  
  <p>I want to display in browser:</p>
  
  <p>Name: France</p>
  
  <p>Capital: Paris</p>
  
  <p>Name: Russia</p>
  
  <p>Capital: Moscow</p>
  
  <p>Thank you for your help </p>