React 文字列型からboolean型への変換

Reactで文字列型をboolean型に変換するときにつまづいたのでメモです。
画面でradioボタンを押したときに、paramsというstateにisDeliveryAddressをboolean型で追加したいです。

正しいコード

CustomerForm.js

handleChangeBool(e) {
  this.setState({
    params: {
      ...this.state.params,        
      isDeliveryAddress: e.target.value === 'true',
    }
  });
}

ダメなコード

CustomerForm.js

handleChangeBool(e) {
  this.setState({
    params: {
      ...this.state.params,
      isDeliveryAddress: Boolean(e.target.value),
    }
  });
}

ダメなコードでうまくいかない原因は、e.target.valueで暗黙の型変換が起きてしまうためです。
e.target.valueには'true','false'というように文字列で入ってくるため,boolean型を指定をしてもうまく変換することができません。
正しいコードのように記述することで暗黙の型変換は行われないため、boolean型で取ることが可能となります。

画面

CustomerForm.js

<table className="redister__destination">
  <tbody>
    <tr>
      <th>
        配送先住所
        <font color="red">※</font>
      </th>
    </tr>
    <tr>
      <td className="redister__input_column">
        <label>
          <input
            type="radio"
            name="destination"
            value={false}
            onChange={e => this.handleChangeBool(e)}
          />
          上記住所
        </label>
        <br />
        <label>
          <input
            type="radio"
            name="destination"
            value={true}
            onChange={e => this.handleChangeBool(e)}
          />
          別の住所に送る
      </label>
      </td>
    </tr>
  </tbody>
</table>

まとめ

int型で取りたいときはNumber()でできてたのに、e.target.valueが絡んできてBoolean()で取れなかったときは非常に困りました。
理解が足りていない部分もあると思いますので、ご指摘いただけると幸いです。