React not changing local state dropdown value

Question

I'm building a PO # entry system to enter the PO number, the due date and the priority. Both the PO number and the due date get changed as they should, but the priority doesn't.

Here's the component code:

import React, { useState, useContext, useEffect } from 'react';
import M from 'materialize-css';
import OrderContext from '../../context/order/orderContext';
import AlertContext from '../../context/alert/alertContext';

const POEntry = () => {
  const orderContext = useContext(OrderContext);
  const alertContext = useContext(AlertContext);
  const { submitPO } = orderContext;
  const { setAlert } = alertContext;

  const [newOrder, setNewOrder] = useState({
    poNum: '',
    dueDate: '',
    priority: '',
  });

  const { poNum, dueDate, priority } = newOrder;

  const onChange = (e) => {
    setNewOrder({
      ...newOrder,
      [e.target.name]: e.target.value,
    });
  };

  const onSubmit = (e) => {
    e.preventDefault();
    if (poNum === '') {
      setAlert('Please fill in all fields', 'danger');
    } else {
      console.log(poNum);
      console.log(dueDate);
      submitPO({
        poNum,
        dueDate,
        priority,
      });
    }
  };

  useEffect(() => {
    M.AutoInit();
    // eslint-disable-next-line
  }, []);

  return (
    <div className="row">
      <form className="col s12" onSubmit={onSubmit}>
        <div className="row">
          <div className="col s12">
            <div className="input-field col s4">
              <i className="fas fa-archive prefix"></i>
              <label htmlFor="poNum">Enter PO Number...</label>
              <input
                id="poNum"
                name="poNum"
                type="text"
                value={poNum}
                onChange={onChange}
              />
            </div>
            <div className="input-field col s4">
              <i className="fas fa-calendar-day prefix"></i>
              <input
                id="dueDate"
                name="dueDate"
                type="date"
                value={dueDate}
                onChange={onChange}
              />
            </div>
            <div class="input-field col s4">
              <select value={priority} onChange={onChange}>
                <option value="low">Low Priority</option>
                <option value="norm">Normal Priority</option>
                <option value="high">High Priority</option>
              </select>
              <label>Priority Level</label>
            </div>
          </div>
        </div>
        <div className="col s12">
          <button className="btn btn-primary btn-block">Submit PO</button>
        </div>
      </form>
    </div>
  );
};

export default POEntry;

To reiterate, the poNum and dueDate state variables get changed in the state properly, but when I select a priority, it creates a new state value labeled : instead of updating the priority value.

It's probably something easy, but I'm at my wits end here. Help!

Answer 1

You are missing a name attribute for your priority select.

You need to do:

<select value={priority} onChange={onChange} name="priority">
    <option value="low">Low Priority</option>
    <option value="norm">Normal Priority</option>
    <option value="high">High Priority</option>
</select>