React.jsにてonChangeを使い、ラジオインプットで選択したものをバックエンドへ送りたい

Question

前提

家電をコントロールできるWebアプリのフロントエンド側をReact.jsを使用し作成しています。

実現したいこと

ラジオインプットで
onChangeを使い、temp_mode_val変数にheat, cool, auto, offなどを
代入しaxiosのPostでtemp_mode_valの中身をバックエンドへ送りたい

発生している問題・エラーメッセージ

ラジオインプットで
onChangeを使い、temp_mode_val変数にheat, cool, auto, offなどを
代入しaxiosのPostでtemp_mode_valの中身を送りたいと思うのですが
中身が空の状態になってしまい送れません。。

該当のソースコード

const DiscoverOffice = () => {
    
    const { entity_id } = useParams();
    
    const SetTemperatureMode = async(data) => {
      console.log("Body sent to server", {
      entity_id: entity_id, 
      operation_mode: temp_mode_val
    })
      await axios.post('xxx.com',
        {
          entity_id: entity_id, 
          operation_mode: temp_mode_val
        },
        {
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${cookies.get('accesstoken')}`
          },
        })
        .then(result => {
          console.log(result.data);
          console.log(entity_id);
          console.log(val);
          console.log('Set Mode!');
          setVal(val);
          // getDevices();
        })
        .catch(err => {
          console.log(err);
          console.log(entity_id);
          console.log('Missed set Mode!');
        });
    }


    const [temp_mode_val, setTemperatureMode2] = useState('off');

    const HeatHandleChange = (e) => {
      setTemperatureMode2(e.target.value);
      SetTemperatureMode(e.target.value);
    }

return (
    

                              <div className="ic_schedule_label flex">
                                <input
                                  className="heat_mode_radio"
                                  type="radio"
                                  value="heat"
                                  onChange={HeatHandleChange}
                                  checked={temp_mode_val === 'heat'}
                                />
                                <p className="radio_text">Heat</p>
                              </div>
                              <div className="ic_schedule_label flex">
                                <input
                                  className="heat_mode_radio"
                                  type="radio"
                                  value="cool"
                                  onChange={() => HeatHandleChange('cool')}
                                  checked={temp_mode_val === 'cool'}
                                />
                                <p className="radio_text">Cool</p>
                              </div>
                              <div className="ic_schedule_label flex">
                                <input
                                  className="heat_mode_radio"
                                  type="radio"
                                  value="auto"
                                  onChange={() => HeatHandleChange('auto')}
                                  checked={temp_mode_val === 'auto'}
                                />
                                <p className="radio_text">Auto</p>
                              </div>
                              <div className="ic_schedule_label flex">
                                <input
                                  className="heat_mode_radio"
                                  type="radio"
                                  value="off"
                                  onChange={() => HeatHandleChange('off')}
                                  checked={temp_mode_val === 'off'}
                                />
                                <p className="radio_text">Off</p>
                              </div>

    
      );
}
export default DiscoverOffice;

Answer 1

ありがとうございます。

onChange={() => HeatHandleChange('Heat')}

そして、下記でうまくいきました！

const SetTemperatureMode = async(data) => {
  console.log("Body sent to server", {
  entity_id: entity_id, 
  operation_mode: data
})
  await axios.post('xxx.com',
    {
      entity_id: entity_id, 
      operation_mode: data
    },
    {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${cookies.get('accesstoken')}`
      },
    })
    .then(result => {
      console.log(result.data);
      console.log(entity_id);
      // console.log(val);
      console.log('Set Mode!');
      setTemperatureMode2(result.data.attributes.climate.filter(c => c.entity_id === entity_id).map((item,i) =>  item.operation_mode
      )[0]);
      // setVal(val);
      getDevices();
    })
    .catch(err => {
      console.log(err);
      console.log(entity_id);
      console.log('Missed set Mode!');
      alert('Unable to set Mode!');
      getDevices();
    });
}

Answer 2

動作例です

import axios from "axios";
import { useState } from 'react'

const RadioChangePost = () => {
  const [val, setVal] = useState('');
  const requestURL = "https://httpbin.org/post";
  const [gotResponse, setResponse] = useState({ "form": { item: "" }});

  const HeatHandleChange = (data: any) => {
    setVal(data.target.value);
    axios.post(requestURL, new URLSearchParams({ item: data.target.value })).then((response) => {
      setResponse(response.data);
    });
  }

  return (
    <>
      <div>
        <input
          type="radio"
          value="heat"
          onChange={HeatHandleChange}
          checked={val === 'heat'}
        />
        Heat
      </div>
      <div>
        <input
          type="radio"
          value="cool"
          onChange={HeatHandleChange}
          checked={val === 'cool'}
        />
        Cool
      </div>
      <div>{gotResponse['form']["item"]}</div>
    </>
  );
}
export default RadioChangePost;