基于字符串连接从对象中获取值

Question

I have a small website written with React & Typescript which works with a Spring boot backend. I'm now trying to implement multiple languages on it but I am hitting an issue.

Before the implementation of languages the issue wasn't present because I could just get the value based on it's name:

<div className="product-category-list">
  {props.productCategory.map(function (item, id) {
    return <div className="product-category-div">
      <img className="product-category-image" src={"data:image/png;base64, " + item.picture}/>
      <p className="product-category-title">{ item.name }</p>
    </div>
  })}
</div>

This results in the value of item.name being shown on the website the way it should be.

Now the code is different because the name property of item has been changed to multiple values (nameEN, nameFR, nameNL, ...). To implement this the language is saved on the application and can get called. So now the code is as follows:

<div className="product-category-list">
  {props.productCategory.map(function (item, id) {
    return <div className="product-category-div">
      <img className="product-category-image" src={"data:image/png;base64, " + item.picture}/>
      <p className="product-category-title">{ "item.name".concat(getLanguage().toUpperCase()) }</p>
    </div>
  })}
</div>

Because of this change the website shows the String item.nameEN or item.nameNL in the frontend instead of the value. I've tried several ways of fixing it and researched it but I can't find any information on this specific issue.

I'm looking for a way to be able to get the value of an item key which is build based on a String concatenation. Any help would be greatly appreciated because I'm very stuck.

Thank you!

Answer 1

Let's take a look at your previous code which you said was working:

<p className="product-category-title">{ item.name }</p>

Here you are accessing a property name of the object item .

In your new code:

<p className="product-category-title">{ "item.name".concat(getLanguage().toUpperCase()) }</p>

Here you are just returning a string with the value "item.nameEN" and not accessing the object called item .

What you want is to still access item but do that with a key that you are building dynamically. Try this:

<p className="product-category-title">{ item["name" + getLanguage().toUpperCase()] }</p>

Answer 2

just replacing

"item.name".concat(getLanguage().toUpperCase())

with

item["name" + getLanguage().toUpperCase()

should work fine