React Form에서 POST 요청으로 Slack 채널에 데이터 전송하기

React form을 만들어서 POST 요청을 하고싶었다. 이를 어디에 테스트해볼까 생각하다 Slack 채널에 메시지를 보내기로 해봤다.

axios를 사용했고, credential 옵션은 빼도 무방하다.

 

import axios from 'axios';

const MyForm = () => {
  async function handleSubmit(e) {
    //prevent reloading
    e.preventDefault();

    // Read form data
    const form = e.target;
    const formData = new FormData(form);

    const formJson = Object.fromEntries(formData.entries());

    const url = 'Your webhook address';

    const data = {
      text: JSON.stringify(formJson),
    };
    axios.post(url, JSON.stringify(data), {
      withCredentials: false,
    });
  }

  return (
    <form method='post' onSubmit={handleSubmit}>
      <label>
        Situation: <input name='situation' />
      </label>
      <hr />

      <label>
        Task: <input name='task' />
      </label>
      <hr />

      <label>
        Action: <input name='action' />
      </label>
      <hr />

      <label>
        Result: <input name='result' />
      </label>
      <hr />
      <button type='submit'>submit</button>
    </form>
  );
};
export default MyForm;