如何显示/隐藏反应挂钩的结果

Question

我目前正在学习如何使用React，并且在练习问题上遇到了困扰，我需要切换按钮来打开和关闭特定国家/地区的详细信息。我遇到的问题是，每当我单击按钮时，它都会打开整个列表的开关，从而传播所有内容。以下代码是我指的是

// NOTE: only relevant codes are given

const DisplayInfo = ({countries}) => {

    // for button toggle
    const [showAll, setShowAll] = useState(false)

    ... irrelevant codes ...    

    else{ // # of countries are 1 < n < 10
            return(
                <div>
                    {countries.map( country => 
                    <div key={country.name}>
                        {country.name}
                        <button onClick={() => setShowAll(!showAll)}> show </button>
                        <div>
                            Test: is it on? {showAll ? 'yes' : 'no'}
                        </div>
                    </div>
                    )}

                </div>
            )
        }

... some more irrelevant codes...
}

给定参数countries的对象中包含已过滤国家/地区的名称及其信息（例如大写字母，使用的语言等）。

以下是结果输出：

按“显示”按钮将把测试结果从“是”-“否”变为“ 全部”，反之亦然，而不仅仅是选择其中一项进行更改。

感谢您对此问题的任何帮助！