So im trying to make a categories post, the backend part works but it isnt sending any data. i think it's something with my onChange. It works if I do it as a single input and manually type in said category but when I try to do it in a dropdown menu it isnt reading the value i think. My backend has an enum of "grinders" and "trays right now.

This is my front end code

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js">
import React from "react";
import axios from "axios";
import { post } from "../services/service";

const Post = () => {
  const [title, setTitle] = React.useState("");
  const [content, setContent] = React.useState("");
  const [price, setPrice] = React.useState("");
  const [postPic, setPostPic] = React.useState("");
  const [category, setCategory] = React.useState(""); //THIS IS MY HOOK FOR CATEGORIES
  const [status, setStatus] = React.useState("");

  const createPost = async (e) => {
    e.preventDefault();
    if (!title || !category) {
      setStatus("Please enter a title and category");
    } else {
      try {
        const response = await post("/posts/create", {
          title: title,
          content: content,
          price: "$"   price,
          postPic: postPic,
          typeOfCategory: category,
        });
        console.log("DATA", response.data);
      } catch (err) {
        console.error(err.message);
      }
    }
  };

  const handleFileUpload = async (e) => {
    try {
      //   setLoading(true);
      const uploadData = new FormData();
      uploadData.append("imageUrl", e.target.files[0]);

      let response = await post("/posts/add-picture", uploadData);
      setPostPic(response.data.path);
      //   setLoading(false);
    } catch (err) {
      console.error(err.message);
      //   setLoading(false);
      setStatus("Image must be .png, .jpeg, or .webp");
    }
  };

  return (
    <div className="post-page">
      <form className="login-inputs" onSubmit={createPost}>
        <h1 className="post-title">Create post</h1>
        <input
          placeholder="Title..."
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
        <div className="postpic-img-section">
          <img
            className="postpic-img"
            src={
              postPic ||
              "https://www.freeiconspng.com/thumbs/no-image-icon/no-image-icon-15.png"
            }
            alt="Profile Picture"
          />
        </div>
        <textarea
          placeholder="Content..."
          type="text"
          value={content}
          onChange={(e) => setContent(e.target.value)}
        />
        <input
          className="price-input"
          placeholder="$0"
          type="number"
          value={price}
          onChange={(e) => setPrice(e.target.value)}
        />
        {/* <input
          placeholder="category"
          type="text"
          value={category}
          onChange={(e) => setCategory(e.target.value)}
        /> */}

        <label htmlFor="file-upload" className="custom-file-upload">
          <i className="fa fa-cloud-upload">
            <img
              src="https://www.freeiconspng.com/thumbs/upload-icon/upload-icon-22.png"
              alt="Upload"
              height="20"
            />
            Custom Upload
          </i>
        </label>
        <input id="file-upload" type="file" onChange={handleFileUpload} />

        {/* THIS IS WHERE IM TRYING TO MAKE THE DROPDOWN OF THE CATEGORIES */}
        <select value={category} onChange={(e) => setCategory(e.target.value)}>
          <option value="grinders">grinders</option>
          <option value="trays">Trays</option>
        </select>

        <button>Submit</button>
        <p className="login-status">{status}</p>
      </form>
    </div>
  );
};

export default Post;


</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

CodePudding user response：

There is nothing wrong with your select handling. I've just copy-pasted your relevant code snippet and it works well.

const App = () => {
  const [category, setCategory] = React.useState("")
  
  return (
   <div>
   <div>typeOfCategory: {category}</div>
    <select value={category} onChange={(e) => setCategory(e.target.value)}>
      <option value="" disabled>Please select</option>
      <option value="grinders">grinders</option>
      <option value="trays">Trays</option>
    </select>
   </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

CodePudding user response：

Im dumb my token expired and I have a isAuth in my backend