I am trying to use the "show button" to render the Countryinfo component in the given code but I know what I am doing is doing wrong and maybe I need to add state to the list but i am really struggling as to how?

The search function is to work as follows:

1. The fetched database is filtered acc. to input value and,
2. If the matches turn out >10 then no list is rendered and,
3. if the matches turn out between 2-10 then the list of matching countries with a show button is presented, which is supposed to display the countryinfo of that country [THE BUTTON DOESNT WORK ]
4. when the input value only matches one country then the countryinfo component is rendered

codesandbox link :

CodePudding user response：

You can try like this https://codesandbox.io/s/country-db-issue-forked-nvq2y

I've changed the return of Displaycountry and saved to state index of the clicked country to show its info. Also, I've changed the Countryinfo component, so it can display the value of one single country (not an array)