How can I pass dataset attribute to backend

Question

I am trying to get the dataset attributes (data-user-seat-lat and data-user-seat-long) in the option of the Seat selection updated inside of userDetails. Basically when a user chooses his seat from the dropdown, I want the userSeatLat and userSeatLong to be updated inside of userDetails from data-user-seat-lat and data-user-seat-long. Right now the function formValues is updating the values of Name,Airline and Flight so I've tried adding a function for when the user chooses a seat but without success. Any help is appreciated, thank you!

const Home = () => {
    const [userDetails, setUserDetails] = useState({
        userName: '',
        userAirline: '',
        userFlight: '',
        userSeat:'',
        userSeatLat: '',
        userSeatLong: '',
    });

    
    const formValues = (event) => {
        setUserDetails({
            ...userDetails,
            [event.target.name]: event.target.value
        })
    }
    
    const register = async (event) => {

        const body = JSON.stringify({
            userName: userDetails.userName,
            userAirline: userDetails.userAirline,
            userFlight : userDetails.userFlight,
            userSeat : userDetails.userSeat,
            userSeatLat : userDetails.userSeatLat,
            userSeatLong : userDetails.userSeatLong,
        });

        const response = await axios.post("/api/register", body, {
            headers: {
                'Content-Type': 'application/json'
            }
        })
        

    return (
        <div className="container">
            <h1 className="title">Register User</h1>
            <form onSubmit={register}>
                <label>Name: </label>
                <input required type="text" id="userName" name="userName" onChange={formValues}/>
                <br />
                <label>Airline: </label>
                <input required type="text" id="userAirline" name="userAirline" onChange={formValues}/>
                <br />
                    <label>Flight: </label>
                <input required type="text" id="userFlight" name="userFlight" onChange={formValues}/>
                <br />
                <label>Seat: </label>
                <select required type="text" id="userSeat" name = "userSeat" onChange={formValues}>
                    <option id="option1" data-user-seat-lat = "15" data-user-seat-long = "15" >Seat1</option>
                    <option id="option2" data-user-seat-lat = "10" data-user-seat-long = "0" >Seat2</option>
                    <option id="option3" data-user-seat-lat = "-10" data-user-seat-long = "-15" >Seat3</option>
                </select>
                <br />
                <button type="submit">Register</button>
                }
            </form>
        </div>
    )
}

export default Home;

Answer 1

You should start by giving the value property to the options.You do not need to have state variables for lat and long since they're related to seat number. Alternatively you can have a map for each seat value with its respective lat and long value.

<select required type="text" id="userSeat" name = "userSeat" onChange={formValues}>
                    <option id="option1" value="1" data-user-seat-lat = "15" data-user-seat-long = "15" >Seat1</option>
                    <option id="option2" value="2" data-user-seat-lat = "10" data-user-seat-long = "0" >Seat2</option>
                    <option id="option3" value="3" data-user-seat-lat = "-10" data-user-seat-long = "-15" >Seat3</option>
</select>

and a map like this.

const seatMap = {
   "1" : {data-user-seat-lat : "15", data-user-seat-long : "15" },
   "2" : {data-user-seat-lat : "10", data-user-seat-long : "0" },
   "3" : {data-user-seat-lat : "-10", data-user-seat-long : "-15" }
}

and just before posting the values set the lat and long according to map like this

const body = JSON.stringify({
            userName: userDetails.userName,
            userAirline: userDetails.userAirline,
            userFlight : userDetails.userFlight,
            userSeat : userDetails.userSeat,
            userSeatLat : seatMap[userDetails.userSeat].data-user-seat-lat,
            userSeatLong : seatMap[userDetails.userSeat].data-user-seat-long,
        });

Answer 2

You need to get the option that is selected. First get the select element, then use the selectedIndex in the options collection to get the selected option.

Because you use data attributes you can access the dataset property where the values of these attributes can be read. The dash notation user-seat-lat is converted into camelCase notation in the dataset: userSeatLat .

With a destructuring assignment you access the properties you want from the dataset and store them in variables.

Edit: because all the input elements in the form call the formValues function you have logic that does not apply to input elements. You'll have to do some typechecking to account for the select elements.

const formValues = (event) => {
    const { target } = event;

    if (target.tagName === 'SELECT') {
        const selectedOption = target.options[target.selectedIndex]
        const { userSeatLat, userSeatLong } = selectedOption.dataset

        setUserDetails({
          ...userDetails,
          userSeatLat,
          userSeatLong,
        })
    } else {
        setUserDetails({
          ...userDetails,
          [target.name]: target.value,
        })
    }
}