Tengo un componente React que recibe un accesorio, se deben destruir 2 valores del accesorio y el accesorio en sí se debe pasar más, probé lo siguiente pero recibo una Line 23:3: Duplicate key 'countryData' no-dupe-keys advertencia.
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> );Entonces, ¿cómo soluciono esto?
Desestructura tu accesorio dentro de la definición de tu función, como:
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> ); };