Destructing an object and using it - React prop

Question

I have a React component that receives a prop, 2 values should be destructed from the prop and the prop itself should be passed further, I tried the following but am receiving a Line 23:3: Duplicate key 'countryData' no-dupe-keys warning.

const IndividualCountryContainer = ({
  countryData: {
    name: { common },
    flags: { png },
  },
  countryData
}) => (
  <div className='country'>
    <img className='country-flag' src={png} alt={`${common}'s flag`} />
    <IndividualCountryData countryData={countryData} />
  </div>
);

So, how do I solve this?

Answer 1

Destructure your prop inside your function definition, like:

const IndividualCountryContainer = ({ countryData }) => {
  const {
    name: { common },
    flags: { png },
  } = countryData;

  return (
    <div className="country">
      <img className="country-flag" src={png} alt={`${common}'s flag`} />
      <IndividualCountryData countryData={countryData} />
    </div>
  );
};