How to fetch option value from select in React

Question

I'm looking for a way to get option value from select.

Main point for this is that i want to get value from select and then display different car from carArray.

I'm still learning react so please just tell me which way i should go.

My code:

import React, { useState } from 'react'

const UserCar = () => {

    const carArray = [
        {id: 1,name: "Opel Astra", brand: "Opel", model: "Astra J ST SPORT 2.0 CDTI", plate: "KGR XXX"},
        {id: 2,name: "Opel Frontera", brand: "Opel", model: "Frontera 2.2DTI 4x4", plate: "KGR XXX1"},
        {id: 3,name: "Peugeot 207", brand: "Peugeot 207", model: "Peugeot 207 1.4", plate: "KGR XXX2"},
    ]


    const handleChange = (event) => {
        
       const aaa = this.setState({value: event.target.value});      
       console.log(aaa);  
    }


    return (
    <div>
        <select onChange={handleChange}>
            {
                carArray.map(function(element){
                    return(
                        <option value={element.name}> {element.name}</option> 
                    )
                })
            }

            </select>  

/*****\/ Here i want to display car details depend on which one option is selected *****/
                       <form>
                        <fieldset disabled>
                            <legend>Twój samochód: </legend>
                            <div class="mb-3">
                                <label for="disabledTextInput" class="form-label">Marka Pojazdu</label>
                                <input type="text" id="disabledTextInput" class="form-control" placeholder="Opel" />
                            </div>
                             <div class="mb-3">
                                <label for="disabledTextInput" class="form-label">Model Pojazdu</label>
                                <input type="text" id="disabledTextInput" class="form-control" placeholder="Astra J ST SPORT 2.0 CDTI " />
                            </div>
                            <div class="mb-3">
                                <label for="disabledTextInput" class="form-label">Rejestracja</label>
                                <input type="text" id="disabledTextInput" class="form-control" placeholder="KGR XXX" />
                            </div> 
                            
                        </fieldset>
                        <button type="submit" class="btn btn-primary m-4 float-end">Zmień</button>
                    </form> 
    </div>
  )
} 


export default UserCar

The form should be a separate component. Send the value as a parameter. Also, you need to create setState before you can use it (e.g. const [state, setState] = useState();) — Emil Karlsson
– Emil Karlsson, Commented Apr 21, 2022 at 12:55

Liki Crus · Accepted Answer · 2022-04-21 12:55:28Z

1

There are several problems with your JSX code.

1. JSX syntax

HTML attribute for should be replaced with htmlForm.
HTML attribute class should be replaced with className.

2. In the functional component, you need to use useState hook instead of this.setState.

3. Correct implementation.

Define state variable to store the selected car info.

const [selectedCar, setSelectedCar] = useState();
In OnChange function in select element, you will update the selectedCar state variable.

setSelectedCar(carArray.find((ele) => event.target.value == ele.id));

Your component UserCar should look like the following.

const UserCar = () => {
  const [selectedCar, setSelectedCar] = useState<any>();
  const carArray = [Your car array];

  const handleChange = (event) => {
    setSelectedCar(carArray.find((ele) => event.target.value == ele.id));
  };

  return (
    <div>
      <select onChange={handleChange}>
        {carArray.map((element) => {
          return (
            <option key={element.id} value={element.id}>
              {element.name}
            </option>
          );
        })}
      </select>
      {selectedCar && (
        <div>
          {selectedCar.name}, {selectedCar.brand}, {selectedCar.model}
        </div>
      )}
      <form>
        ...
      </form>
    </div>
  );
};

answered Apr 21, 2022 at 12:55

Liki Crus

2,0825 gold badges20 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

D.Jurczak Over a year ago

Thank you! Wonder why react doesnt had a problem with class/for attribute.

Collectives™ on Stack Overflow

How to fetch option value from select in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related