Converted Projcet to React

[adirav02]

No description provided.

[Tamir198]

Good work , I left you some comments

[Tamir198]

You can also destruct the country coming from the props directly :

const Country = ({ country: { name, flag, population, region, capital } }) => {
  return (
    <div className="country scale-effect" data-country-name={name}>
      <div className="country-flag">
        <img src={flag} alt={name} />
      </div>
      <div className="country-info">
        <h2 className="country-title">{name}</h2>
        <ul className="country-brief">
          <li>
            <strong>Population: </strong>
            {population}
          </li>
          <li>
            <strong>Region: </strong>
            {region}
          </li>
          <li>
            <strong>Capital: </strong>
            {capital}
          </li>
        </ul>
      </div>
    </div>
  );
};

[Tamir198]

In react when we have some list it is best to render it via the map function :

const regions = [
  { label: "All", value: "all" },
  { label: "Africa", value: "africa" },
  { label: "America", value: "americas" },
  { label: "Asia", value: "asia" },
  { label: "Europe", value: "europe" },
  { label: "Oceania", value: "oceania" },
];

<ul>
  {regions.map((region) => (
    <li
      key={region.value}
      data-region={region.value}
      onClick={onRegionChanged}
    >
      {region.label}
    </li>
  ))}
</ul>

[Tamir198]

I don't think that the comment adds a lot, because useState(CountriesData); means exactly what you wrote in your comment