CODEWITHSUNDEEP
javascripthtmlcssreactjs
Ritesh Sinha
Ritesh Sinha

Reputation: 840

How to capture value selected from a dropdown list?

I have a simple form that I am creating using react JS. I have 2 text fields, Type & Year, and one dropdown which is car. The car dropdown is populated using a value coming from an API. The user enters text value for the first 2 fields and selects the value for car from the dropdown menu and hits add. I have another post API that captures this value. I can store and set the value for the text boxes but for the dropdown, the value of car is not getting captured and I get a null value. How can I store the value of car like I am doing for other 2 text boxes

import { useHistory } from "react-router-dom";
import axios from "axios";
import React,{useState,useEffect} from 'react';

function NewCar() {

  const [type, setType] = useState("");
  const [year, setYear] = useState("");
  const [car, setCar] = useState("");
  let history = useHistory();

  const [entries,setEntries]=useState([])
  
  useEffect(() => {
    fetchValues();
  }, [])

  useEffect(() => {
    console.log(entries)
  }, [entries])
  
  const fetchValues = async()=>{
    const response = await axios('http://localhost:8080/cars');
    setEntries(response.data)
  }

  const onSubmit = function (e) {
    e.preventDefault();
    axios
      .post("http://localhost:8080/update", {
        type,
        year,
        car
      })
      .then(() => history.push("/"));
  };

  return (
    <form onSubmit={onSubmit}>
    <table border="1">
      Type:{" "}
      <input
        name="type"
        value={type}
        onChange={(e) => setType(e.target.value)}
      />
      <br />
      Year:{" "}
      <textarea
        name="year"
        value={year}
        onChange={(e) => setYear(e.target.value)}
      ></textarea>{" "}
      <br />
      <label for="car">Car:</label>
        <select id="car" name="car">
          {entries.map((entry) => (
             <option value={entry.name}>{entry.name}</option>
          ))}
          name="car"
          value={car}
          onChange={(e) => setCar(e.target.value)}
       </select>
      <br />
    </table>
      <button>Add</button>
    </form>
  );
}

export default NewCar;

Upvotes: 0

Views: 199

Answers (1)

Mohammad Khan
Mohammad Khan

Reputation: 363

I believe you made a mistake in your code by placing your attributes outside the select tag, it should look something like this:

  <select
    id="car"
    name="car"
    value={car}
    onChange={(e) => setCar(e.target.value)}
  >
    {entries.map((entry) => (
      <option value={entry.name}>{entry.name}</option>
    ))}
  </select>

I have this sample in which u can get the the value of a select tag or dropdown, hope you can reference from it.

const [dataItem, setDataItem] = useState("");

  const data = [
    {
      name: "Ford",
      year: "1903",
    },
    {
      name: "Chevy",
      year: "1904",
    },
    {
      name: "Dodge",
      year: "1905",
    },
    {
      name: "Honda",
      year: "1906",
    },
    {
      name: "Toyota",
      year: "1907",
    },
  ];

  return (
    <>
      {dataItem}
      <select
        name="dataItem"
        value={dataItem}
        onChange={(e) => setDataItem(e.target.value)}
      >
        {data.map(({name}) => (
          <option value={name}>{name}</option>
        ))}
      </select>
    </>
  );

If it still went wrong, please let me know and write a comment below.

Upvotes: 1

Related Questions