dynamically set select input value

Question

in a food truck app that I'm building, I have an order card component. On that order card component, it shows all the items that a user has in their order plus the count of each item. Where the count of each item is shown, I want to change that to render a select input where the default value of the select would be whatever count the user has already selected. I then want the user to be able to change the count using the select input.

Here is a screenshot of the component in the UI:

What I want to change to a select input is the count to the left of each item in the order. For example, the first item in this order is chicken tacos. The count is 2. I want a select input there to be set dynamically to 2 but then that the user be able to increase or decrease the count of chicken tacos in their order if they so choose.

Here is the code from the component:

const OrderCard = props => {
    const orderCount = props.order.reduce(function(prev, cur) {
        return prev + cur.count;
    }, 0);

    return (
        
             props.closeOrderCard()}>

            Your Order
            from {props.selectedTruck.name}

            
                {props.order.map(item => (
                    
                        {item.count}
                        {item.item}
                        {CurrencyFormatter.format(item.total, { currency: 'USD' })}
                        
                    
                ))}
            

            

            
        
    )
}

const mapStateToProps = state => {
    return {
        selectedTruck: state.selectedTruck,
        order: state.order
    }
}

export default connect(mapStateToProps, { closeOrderCard })(OrderCard);

It's been really hard to find examples of this by Googling. Please let me know if you need any more context/info and thanks in advance for your help.

UPDATE:

For those asking why a select and not a regular input, I am just copying this design from what is on Uber Eats. I may use the idea suggested but I still want to know how I would do this using a select input. Here is a screenshot of the order component from Uber Eats:

Quentin Grisel · Accepted Answer

Here is your code modified with a select:

const OrderCard = (props) => {
  const [state, setState] = useState(props.order);

  const orderCount = props.order.reduce(function (prev, cur) {
    return prev + cur.count;
  }, 0);

  const displayOptions = (count) => {
    const options = [0, 1, 2, 3, 4, 5];

    return options.map((option) => (
      
    ));
  };

  const onSelectValueChange = (item) => {
    const selectedValue = document.getElementById('mySelect').value;
    // Do whatever you need with the value
    if(selectedValue === 0) {
      const newOrder = Object.assign({}, state); // better use deepclone() from lodash if you can
      for(let i = 0; i < newOrder.length; i++){
        const item = newOrder[i];

        if(item.id === item.id){
          newOrder.splice(i, 1);
          setState({...state, order: newOrder});
        }
      }
    }
  }

  return (
    
       props.closeOrderCard()}
      >

      Your Order
      
        from {props.selectedTruck.name}
      

      
        {props.order.map((item) => (
          
            
              
            
            {item.item}
            
              {CurrencyFormatter.format(item.total, { currency: 'USD' })}
            
            
          
        ))}
      

      

      
    
  );
};

const mapStateToProps = (state) => {
  return {
    selectedTruck: state.selectedTruck,
    order: state.order,
  };
};

export default connect(mapStateToProps, { closeOrderCard })(OrderCard);

I assume you know the possible options to put in your select, else you really should use an input type='number' with min/max value if needed.

[Edit]: I added the delete option you wanted though the selectedValue of the select. The principle is the same with a button. I also assumed that you have a state with your order inside.

dynamically set select input value

Answers (2)

Related Questions