React Forms

by Lisa French

HTML

<div id="root"></div>

CSS

body {
  height: 100vh;
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-weight: bold;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

select {
  width: 100%;
}

React

/* Can't use module imports */
const useState = React.useState;
const url = "https://httpbin.org/get";

// export default function Form() {
const Form = () => {
  const [optionSelected, setOptionSelected] = useState("");

  const getOptions = async () => {
    try {
      const response = await fetch(url, {
        // method: "GET", // Not needed since GET is the default
        headers: "Content-type': 'application/json; charset=UTF-8",
        body: JSON.stringify({ options }),
      });
      const data = await response.json();
    } catch (error) {
      console.log(error);
    }
  };

  const addOptionSelected = async (optionSelected) => {
    try {
      const response = await fetch(url, {
        method: "POST",
        headers: { "Content-type": "application/json; charset=UTF-8" },
        body: JSON.stringify({
          optionSelected,
        }),
      });
      let data = await response.json();
    } catch (error) {
      console.log(error);
    }
  };

  const deleteOptionSelected = async (optionSelected) => {
    try {
      const response = await fetch(url, {
        method: "DELETE",
        headers: { "Content-type": "application/json; charset=UTF-8" },
        body: {
          optionSelected,
        },
      });
    } catch (error) {
      console.log(error);
    }
  };
  
  
// WRONG

/*     const addOptionsSelected = async () => {
        try {
      const option = await () => {
        {
          method: "POST",
          header: "",
          body: {
            optionSelected
          }
        }
            setOptionSelected(option)
      }
    } catch (error) {
      console.log(error);
    }
    
      }
      
    const addOptionSlected = async () => {
        try {
      const resposne = await FETCH(url, {
        method: "POST",
        headers: "",
        body: {
            // no objeect for body
        optionSelected:  JSON.stringify(
            optionSelected
          )
        }
      })
    }
    catch (ERROR) {
     ...