Changing a react state variable according to drop down of select tag in jsx

Question

I have a form in which there is an option to select the number of seats for booking. I also have a state variable noofseats which is 0 by default and should change according to the option selected in the select tag. How do i do that? Im trying onchange and all but the value still remains at 0

TicketConfirm.js

import React from 'react'
import { useParams } from 'react-router-dom'
import { useState,useEffect } from 'react';
import './Ticketconfirm.css'


export default function Ticketconfirm() {
    const [noofseats, setnoofseats] = useState(0)
    const [totalcost, settotalcost] = useState(0)
    
    

    useEffect(() => {
      settotalcost(noofseats*ticketprice)
    
      
    }, [])
    

    const { busid, busname, fromcity, tocity, ticketprice, seatsleft, starttime, reachtime } = useParams();
    return (
        <>
        


        {noofseats}
        Booking Confirmation
            
            
            


                


            ID {busid}
            
            From {fromcity}
            To {tocity}
            Bus {busname}
            Starts {starttime}
            Reaches {reachtime}
            
       

            
            
            {ticketprice} per seat
            {seatsleft} seats  left
            {/*  */}
            
            Number of Tickets
            
            
            
            
            
            
            
        

    )
}

user_16632344 · Answer

change your Select Tag to this :

and useEffect should run each time noofseats changes. So add it as a dependency :

useEffect(() => {
  settotalcost(noofseats*ticketprice)

  
}, [noofseats])

user_17831273 · Answer

You have used onChange on option component, you have to use it on select. And also you missed useEffect dependency.

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import './Ticketconfirm.css';

export default function Ticketconfirm() {
const [noofseats, setnoofseats] = useState(0);
const [totalcost, settotalcost] = useState(0);

useEffect(() => {
    settotalcost(noofseats * ticketprice);
}, [noofseats]);

const {
    busid,
    busname,
    fromcity,
    tocity,
    ticketprice,
    seatsleft,
    starttime,
    reachtime,
} = useParams();
return (
    <>
        

        

        {noofseats}
        
            Booking Confirmation
        

        
            
                
                    ID {busid}
                

                
                    From {fromcity}
                
                
                    To {tocity}
                
                
                    Bus {busname}
                
                
                    Starts {starttime}
                
                
                    Reaches {reachtime}
                
            
            
                
                    {ticketprice} per seat
                
                
                    {seatsleft} seats left
                
                {/*  */}
                
                    
                        Number of Tickets
                    
                    
                
                
                    
                
            
        
    
);

}

Changing a react state variable according to drop down of select tag in jsx

2 Answers