Using i18n within an array map

[jomis003]

Looking for help in implementing the { gettext("string") } in the settings index.jsx file within an array map such as below. Any help is appreciated.

const arrayInfo = [
['Label 1', 'placeholder 1', 'settingskey1'],
['Label 2', 'placeholder 2', 'settingskey2'],
['Label 3', 'placeholder 3', 'settingskey3'],
];

arrayInfo.map(([label, placeholder, settingsKey]) =>
<TextInput
     label={label}
     placeholder={placeholder}
     settingsKey={settingsKey} 
/> ) 
}

[qichuan]

Are you looking for a way to generate a list of UI components in a loop?

I rewrote your code as follows

First, declare an array of info object,

const arrayInfo = [{
  label: 'Label 1',
  placeholder: 'Place holder 1',
  settingsKey: 'settingsKey 1'
},{
  label: 'Label 2',
  placeholder: 'Place holder 2',
  settingsKey: 'settingsKey 2'
},{
  label: 'Label 3',
  placeholder: 'Place holder 3',
  settingsKey: 'settingsKey 3'
},];

And use this object array inside the UI tags

 <Page>
    {arrayInfo.map((value, index) => {
        return <TextInput
          label={value.label}
          placeholder={value.placeholder}
          settingsKey={value.settingsKey} 
          />
      })}
</page>

If everything checks out, you will have the list of UI elements rendered in the settings page

[jomis003]

Your breakdown does the same thing that I am doing today. The way that I am doing it is an attempt to minimize code because I would have 5 of these arrays with 10 selections is each. 

I believe I would also have the same issue using the i18n code because I would need to wrap the string in the array info object. I am doing that now and its not working.