CODEWITHSUNDEEP
javascriptreactjs
Anna-Ha
Anna-Ha

Reputation: 55

Destructing an object and using it - React prop

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?

Upvotes: 1

Views: 642

Answers (1)

Camilo
Camilo

Reputation: 7184

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>
  );
};

Upvotes: 3

Related Questions