i am working with a REST API that provides data for different countries. I have a search box and when i am typing letters under the box appeared different countries that matches with the search. Each country that appears has a button beside and when you click that button some information about this country appears. I have two different components, the first component showing the countries that matches the search and the second component showing the information from the selected country.

The code of the first component:

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

The second component called

<TheCountry/>

When the user clicks the show button i want to call the component

<TheCountry/>

and show in the screen the details about this particular country. But something like this did not happen, i screen all the data for all the countries that matches the search query. I did not find a correct way to call my component and isolate the country that trigger the button. Can anyone help ?