Arrays 如何访问React中的某个映射元素？

我有一个map函数，它从函数组件中的JSON回调返回元素

我需要通过属性从映射回调中找到某个元素，并为其着色

如果没有React.js，我可能会使用该文档，但我知道最好使用变量引用。问题是我的元素可以从字符串访问，并且没有永久的顺序。我该怎么办

我的代码示例：

   let x = [{name: 'elephant', symbol: 'e'}, {name: 'rabbit', symbol: 'r'}];

   let mapped = x.map(x =>
        <button
            title={x.name} // <- I want only: [title="elephant"]
        >
            {x.symbol}
        </button>
    )

    React.useEffect(() => {
          
    }, [])

---

实现这一点的方法有很多，一种是预先筛选（可以有多个匹配项）：

let mapped = x
  .find((x) => x.name === "elephant")
  .map((x) => <button title={x.name} style={{color: 'green'}}>{x.symbol}</button>);

let mapped=x
.find（（x）=>x.name==“大象”）
.map（（x）=>{x.symbol}）；

您还可以查找（针对单个特定项目），然后使用以下值：

let specific = x.find((x) => x.name === "elephant");

// Then use it
<button title={specific.name} style={{color: 'green'}}>{specific.symbol}</button>;

let specific=x.find（（x）=>x.name==“大象”）；
//然后使用它
{specific.symbol}；

它应该适合您的需要：

<button
  title={x.name} // <- I want only: [title="elephant"]
  style={x.name === 'elephant' ? { color: 'green'} : {}}
>
  {x.symbol}
</button>

---

另一方面，如果您想解释在数组中除了<代码>象>代码>以外的其他对象添加样式的可能性，请考虑此模式。

设x=[
{名称：“大象”，符号：“e”，颜色：“绿色”}，
{名称：'rabbit'，符号：'r'，颜色：'red'}，
{名称：'dog'，符号：'d'}，
];
让mapped=x.map（x=>
{x.symbol}
)

<button
  title={x.name} // <- I want only: [title="elephant"]
  style={x.name === 'elephant' ? { color: 'green'} : {}}
>
  {x.symbol}
</button>