javascript - ESNext の関数にキーを渡すにはどうすればよいですか?

Question

WordPress 用のグーテンベルク ブロック プラグインを作成していますが、新しい ESNext 構文に頭を悩ませています。キーと値のペアを持つフィールドのリストがあります。私が持っているコードは次のとおりです。

{
  ...
  edit: function( { className, attributes, setAttributes } ) {
    return (
      <div className={ className }>
        <label className="field">
          <span className="field__label">Name</span>
          <PlainText
            className="field__input"
            id="email"
            value={ attributes.name }
            onChange={ ( name ) => setAttributes( { name } ) }
          />
        </label>
        <label className="field">
          <span className="field__label">Email</span>
          <PlainText
            className="field__input"
            id="email"
            value={ attributes.email }
            onChange={ ( email ) => setAttributes( { email } ) }
          />
        </label>
      </div>
    );
  }
  ...
}

このコードの繰り返しを少なくし、コピーと貼り付けを避けたいと思います。これは私が得た距離です：

{
  edit: function( { className, attributes, setAttributes } ) {
    var fields = {
      name:    'Name',
      email:   'Email',
      phone:   'Phone',
      website: 'Website',
    }
    var html = [];
    for ( var field_key in fields ) {
      var label = fields[ field_key ];
      html.push( (
        <label className="field" key={field_key}>
          <span className="field__label">{ label }</span>
          <PlainText
            className="field__input"
            id={field_key}
            value={ attributes[field_key] }
            onChange={ ( ??? ) => setAttributes( { ??? } ) }
          />
        </label>
      ) );
    }
    return (
      <div className={ className }>
        {html}
      </div>
    );
  },
}

field_key変数を関数に渡すにはどうすればよいsetAttributesですか?