JSX：带有动态名称+数组的输入名称

Question

我是 React 的新手，所以我想知道如何为输入字段动态创建名称，该名称由“id”和“数组属性”组成。如下所示，“id”来自数组“words”。当我运行下面的代码时，此输入字段由 strings '2[comment]' 和 '2[important]' 标识，但我想要部分 '[comment]' 和 '[important] ]' 被标识为数组属性，因此我可以按单词 ID 对 FORM 数据进行分组。 JSX 中有没有办法做到这一点？

要清楚：这是我在此时发布后得到的（键被压扁为字符串）：

这正是我所期望的（键按图书 ID 分组）：

这是我目前拥有的代码：

render() {
    return 
        {this.state.words.map((word) => (
          <form method="post">
           <input type="text" name={`${word.id}[comment]`} />   // not good: returns string '2[comment]'
           <input type="checkbox" name={`${word.id}[important]`} />  // returns string '2[important]' :(
        ))}
}