function Country(props) {

  let popDensity = props.population/props.area; 

  let popFeature = popDensity > 200 ? 'sparsely' : 'densely';

  let isDemocracy = props.democracy && `${props.name} is a Democracy.`;

  let states = props.largestStates.map(state => <li>{state}</li>);

  return (

    <div className="container">

      <h2 className="country-name">Country Name: {props.name}</h2>

      <p className="population">Population: {props.population}</p>

      <p className="area">Area: {props.area} km<sup>2</sup></p>

      <p>{isDemocracy}</p>

      <p>It is {popFeature} populated.</p>

      <h3>Five Largest States:</h3>

      <ol>

        {states}

      </ol>

    </div>

  );

}

​

let countryElement = (

  <>

    <Country

      name="United States"

      population={332800000}

      area={9833520}

      democracy

      largestStates={["Alaska", "Texas", "California", "Montana", "New Mexico"]}

    />

  </>

);

​

let rootElement = document.getElementById("root");

ReactDOM.createRoot(rootElement).render(countryElement);

​