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!

segFault · Accepted Answer · 2020-04-24 19:29:49Z

2

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>

answered Apr 24, 2020 at 19:29

segFault

4,0541 gold badge21 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

React not changing local state dropdown value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related