配列で使用する関数を使い分ける方法を知りたい

Question

前提・実現したいこと

react nativeでアプリ開発をしています。

配列を使って、複数のtextInputを表示し、それぞれのinputで別の入力と表示をしたいです。

そのため、配列の値（View）ごとに使用する関数を使い分けたいのですが、うまくいきません。

---

配列の値ごとに使い分けたい関数は以下の内容です

onChangeText={(text) => {
           this.setState({stateA : text});
         }}

---

stateを２種類、配列を２つ作り、配列によってstateの値を変えるため、以下のコードを作りました。

import React from "react";
import { View, Text, TextInput } from "react-native";

class Test extends React.Component {
  state = {
    stateA: "",
    stateB: "",
  };

  renderList(element) {
    return (
      <View>
        <Text>{element.name}</Text>
        <TextInput
          value={element.value}
          onChangeText={(text) => {        　　　//①ここの引数が見つけられない
            this.setState(element.stateName);
          }}
        />
      </View>
    );
  }

  render() {
    const list = [];

    const Array = [
      {
        name: "入力A",
        value: this.state.stateA,
        stateName: { stateA: text },
      },
      {
        name: "入力B",
        value: this.state.stateB,
        stateName: { stateB: text },
      },
    ];

    Array.forEach((element) => {
      list.push(this.renderList(element));
    });
    return <View>{list}</View>;
  }
}

export default Test;

この場合ですと、①とコメントアウトした部分の引数が利用できなくなり、入力されたテキスト内容をstateへ反映できません。

解決の方法、ご存知の方おりましたら、ご教授いただけないでしょうか？

補足情報（FW/ツールのバージョンなど）

node : 12.18.3
react native : 4.10.1
expo : 3.22.3

Answer 1

強引な方法だと

            this.setState({
              [Object.keys(element.stateName)[0]]: text
            })

でできます。

または stateKey などを持っておいて、

    const Array = [
      {
        name: "入力A",
        value: this.state.stateA,
        stateName: { stateA: text },
        stateKey: 'stateA'
      },
      {
        name: "入力B",
        value: this.state.stateB,
        stateName: { stateB: text },
        stateKey: 'stateB'
      },
    ];

            this.setState({
              [element.stateKey]: text
            })

でもできます。

Comments

[tomaa]

解決する事ができました。
ご丁寧な回答いただきありがとうございます！