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