Estoy trabajando con una API REST que proporciona datos para diferentes países. Tengo un cuadro de búsqueda y cuando escribo letras debajo del cuadro aparecen diferentes países que coinciden con la búsqueda. Cada país que aparece tiene un botón al lado y al hacer clic en ese botón aparece información sobre este país. Tengo dos componentes diferentes, el primer componente que muestra los países que coinciden con la búsqueda y el segundo componente que muestra la información del país seleccionado.

El código del primer componente:

 import {useState} from 'react' import TheCountry from './TheCountry' const TheSearchCountry= ({countrie}) => { const [buttonClicked, setButtonClicked] = useState(true) return ( buttonClicked ? countrie.map(country => ( <p key={country.name}> {country.name} <button onClick={() => {setButtonClicked(false)}}>show</button> </p> )) : <TheCountry countries={countrie} /> ) } export default TheSearchCountry

El segundo componente llamado

 <TheCountry/>

Cuando el usuario hace clic en el botón Mostrar, quiero llamar al componente

 <TheCountry/>

y mostrar en la pantalla los detalles sobre este país en particular. Pero algo como esto no sucedió, examino todos los datos de todos los países que coinciden con la consulta de búsqueda. No encontré una forma correcta de llamar a mi componente y aislar el país que activa el botón. Alguien puede ayudar ?