function Country(props) {

  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 className="positive">

        {props.democracy && `${props.name} is a Democracy.`}

      </p>

      <p className="negative">

        {props.population / props.area > 200 &&

          `${props.name} is densely populated.`}

      </p>

      <p>

        {props.continent == "Asia"

          ? `${props.name} is in Asia.`

          : `${props.name} is not in Asia.`}

      </p>

    </div>

  );

}

​

let countryElement = (

  <>

    <Country

      name="India"

      population={1389637446}

      area={3287263}

      democracy

      continent="Asia"

    />

    <Country

      name="United States"

      population={332800000}

      area={9833520}

      democracy

      continent="North America"

    />

  </>

);

​

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

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

​