Returning correct value select on option – It always brings me the final result in the array

i have a problem.
I’m trying to create an option and I have a variety of options there.
Now I want when I select something from the list of options and press the Create button it will bring me the result I chose.
But for some reason it always gives me the final result in the array.

Data list

export const Form_Types = [
  { id: 1, name: "car1", url: "" },
  { id: 2, name: "car2", url: "" },


import loading from "../loading.mp4";
import { Form_Types } from "../components/Form_types";
import { useRef } from "react";

function CreatingDocument() {
  const SelectRef = useRef(null);

  const handlerSubmit = (e) => {
    console.log(SelectRef.current.value); // **it give me alwasy car2**

  return (
      <section dir="rtl" id="dashboard">

        <form onSubmit={handlerSubmit}>
          <label htmlFor="Form_Types">Select a vehicle type</label>

          <select name="Form_Types" id="Form_Types">
            { => {
              return (
                <option key={} value={} ref={SelectRef}>
          <button className="btn-dark">Create</button>

      <video muted loop autoPlay>
        <source src={loading} type="video/mp4" />

export default CreatingDocument;

>Solution :

That is due to you have multiple items in Form_Types, rendering multiple option, and your selectRef is set…. on options, not on select. So selectRef is always the last rendered option, which is car2.

<select name="Form_Types" id="Form_Types" ref={SelectRef}>

Leave a Reply