Как вывести ключ и значение моего состояния?

Question

Я хочу иметь возможность выводить ключ и значение ключа элементов в моем состоянии. Я пытался использовать {[this.state[field]]}, но это тоже не сработало.

Пример: https://jsfiddle.net/n5u2wwjg/164470/

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        type: 'valueOfType',
        subType: 'valueOfSubType',
        anotherThing: 'valueOfOther'
    }
  }

  renderItem = (field) => {
     return <div>{['nameOfKey']}: {field}</div>
  }

  render() {
    const { type, subType, anotherThing } = this.state;
    return (
      <div>
        <p><strong>Actual output:</strong></p>
        {this.renderItem(type)}
        {this.renderItem(subType)}
        {this.renderItem(anotherThing)}

        <hr/>
        <p><strong>Desired output:</strong></p>
        <div>type: valueOfType</div>
        <div>subType: valueOfSubType</div>
        <div>anotherThing: valueOfOther</div>
     </div>
    )
  }
}

Answer 1

Как подсказал @ Li357, вы можете передать ключ в виде строки и использовать его как this.state[field] в своем методе. Кроме того, вы можете использовать Object.entries и map для рендеринга всех полей.

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      type: 'valueOfType',
      subType: 'valueOfSubType',
      anotherThing: 'valueOfOther'
    }
  }

  renderItem = (field) => {
    return <div>{field}: {this.state[field]}</div>
  }

  renderAll = () => Object.entries( this.state ).map( ([key,value]) =>
    <p>{key}:{value}</p>
  );

  render() {
    return (
      <div>
        <p><strong>Actual output:</strong></p>
        {this.renderItem("type")}
        {this.renderItem("subType")}
        {this.renderItem("anotherThing")}

        <hr />
        {this.renderAll()}

        <hr />
        <p><strong>Desired output:</strong></p>
        <div>type: valueOfType</div>
        <div>subType: valueOfSubType</div>
        <div>anotherThing: valueOfOther</div>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>