CODEWITHSUNDEEP
reactjsjsx
Alpha
Alpha

Reputation: 45

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

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 (
        <>
        <br /><br />
        <h1 style={{color:'white'}}>{noofseats}</h1>
        <h1 className='text-center' style={{color:'white'}}>Booking Confirmation</h1>
            
            <div className='text-center' style={{ width:'900px',border:'2px solid white',marginLeft:'300px',marginTop:'10px'}}>
            <div className="parent" >


                


            <h2 style={{fontSize:'25px',color: 'white',padding:'25px' }}>ID {busid}</h2>
            
            <h2 style={{fontSize:'25px', color: 'white',padding:'25px' }}>From {fromcity}</h2>
            <h2 style={{fontSize:'25px', color: 'white',padding:'25px' }}>To {tocity}</h2>
            <h2 style={{fontSize:'25px', color: 'white',padding:'25px' }}>Bus {busname}</h2>
            <h2 style={{fontSize:'25px', color: 'white',padding:'25px' }}>Starts {starttime}</h2>
            <h2 style={{fontSize:'25px', color: 'white',padding:'25px' }}>Reaches {reachtime}</h2>
            
       

            </div>
            <div className="parent2">
            <h2  style={{fontSize:'25px', color: 'white',padding:'25px' }}>{ticketprice} per seat</h2>
            <h2 style={{fontSize:'25px', color: 'white',padding:'25px' }}>{seatsleft} seats  left</h2>
            {/* <input style={{width:'200px',height:'50px',marginLeft:'20px'}}></input> */}
            <div>
            <label style={{color:'white',fontSize:'25px'}} for="cars">Number of Tickets</label>
            <select style={{width:'80px',height:'50px',marginLeft:'20px'}}  name="cars" id="cars">  
                <option  onChange={e=>setnoofseats(e.target.value)} value = "1">1</option>
                <option onChange={e=>setnoofseats(e.target.value)}   value="2">2</option>
                <option onChange={e=>setnoofseats(e.target.value)}  value="3">3</option>
                <option onChange={e=>setnoofseats(e.target.value)}  value="4">4</option>
                <option  onChange={e=>setnoofseats(e.target.value)} value="4">5</option>
                <option onChange={e=>setnoofseats(e.target.value)}  value="4">6</option>
            </select>
            </div>
            <div style={{padding:'25px',paddingBottom:'50px'}}>
            <button style={{boxShadow:'none'}} className="btn btn-success">Pay ₹{totalcost} </button>
            </div>
            </div>
            </div>
        </>

    )
}

Upvotes: 1

Views: 894

Answers (2)

monim
monim

Reputation: 4406

change your Select Tag to this :

        <select value={noofseats}  onChange={(e=> setnoofseats(e.target.value))}  style={{width:'80px',height:'50px',marginLeft:'20px'}}  name="cars" id="cars">  
            <option   value = "1">1</option>
            <option   value="2">2</option>
            <option  value="3">3</option>
            <option value="4">4</option>
            <option  value="5">5</option>
            <option   value="6">6</option>
        </select>

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

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

  
}, [noofseats])

Upvotes: 1

Shubham Mistry
Shubham Mistry

Reputation: 159

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 (
    <>
        <br />
        <br />
        <h1 style={{ color: 'white' }}>{noofseats}</h1>
        <h1 className="text-center" style={{ color: 'white' }}>
            Booking Confirmation
        </h1>

        <div
            className="text-center"
            style={{
                width: '900px',
                border: '2px solid white',
                marginLeft: '300px',
                marginTop: '10px',
            }}
        >
            <div className="parent">
                <h2 style={{ fontSize: '25px', color: 'white', padding: '25px' }}>
                    ID {busid}
                </h2>

                <h2 style={{ fontSize: '25px', color: 'white', padding: '25px' }}>
                    From {fromcity}
                </h2>
                <h2 style={{ fontSize: '25px', color: 'white', padding: '25px' }}>
                    To {tocity}
                </h2>
                <h2 style={{ fontSize: '25px', color: 'white', padding: '25px' }}>
                    Bus {busname}
                </h2>
                <h2 style={{ fontSize: '25px', color: 'white', padding: '25px' }}>
                    Starts {starttime}
                </h2>
                <h2 style={{ fontSize: '25px', color: 'white', padding: '25px' }}>
                    Reaches {reachtime}
                </h2>
            </div>
            <div className="parent2">
                <h2 style={{ fontSize: '25px', color: 'white', padding: '25px' }}>
                    {ticketprice} per seat
                </h2>
                <h2 style={{ fontSize: '25px', color: 'white', padding: '25px' }}>
                    {seatsleft} seats left
                </h2>
                {/* <input style={{width:'200px',height:'50px',marginLeft:'20px'}}></input> */}
                <div>
                    <label style={{ color: 'white', fontSize: '25px' }} for="cars">
                        Number of Tickets
                    </label>
                    <select
                        style={{ width: '80px', height: '50px', marginLeft: '20px' }}
                        onChange={(e) => setnoofseats(e.target.value)}
                        name="cars"
                        id="cars"
                    >
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="4">5</option>
                        <option value="4">6</option>
                    </select>
                </div>
                <div style={{ padding: '25px', paddingBottom: '50px' }}>
                    <button style={{ boxShadow: 'none' }} className="btn btn-success">
                        Pay ₹{totalcost}{' '}
                    </button>
                </div>
            </div>
        </div>
    </>
);

}

Upvotes: 0

Related Questions