onChange event use in select component in React dosen't works

Question

I'm in a Laravel project with InertiaJS and React fro the FrontEdn and I'm trying to send the value of the selected option but for some reason it dosent send anything. I lost too much time trying to resolve this but I can't, I really appreciate any help.

My Form:

import React from "react"

import { useForm } from "@inertiajs/inertia-react"

import LoadingButton from "@/base/elements/LoadingButton"
import TextInput from "@/base/forms/fields/TextInput"
import Select from "@/base/forms/fields/Select"

const UserFormData = ({ customer }) => {
  const { data, setData, errors, post, processing } = useForm({
    email: customer.email,
    language: '',
  });
  function handleSubmit(e) { 
    e.preventDefault()
    post("/change-language-profile")
  }
  return (
    <section>
        <form onSubmit={handleSubmit}>
          <fieldset>
            <legend>Contact data</legend>
            <div className="fields-wrapper">
              <TextInput
                label="Fullname"
                name="fullname"
                type="text"
                value={customer.fullname}
                readOnly
              />
              <TextInput
                label="Email"
                name="email"
                type="email"
                value={customer.email}
                readOnly
              />
              <TextInput
                label="Phone"
                name="phone"
                type="phone"
                value="+34 654 321 000"
                readOnly
              />
              <Select
                label="Language"
                name="language"
                onChange={e => setData("language", e.target.value)}
              />
              <LoadingButton
                type="submit"
                loading={processing}
                className="btn-indigo"
              >
                Change Language
              </LoadingButton>
              </div>
          </fieldset>
        </form>
    </section>
  )
}
export default UserFormData

My Select component:

import React, {useState} from "react"

const Select = ({name, value, onChange}) => {
    // const handleChange = event => {
    //     this.setState({value: event.target.value})
    // }
    const [languageChoice, setLanguageChoice] = useState()
    console.log(onChange)
    console.log(value) // This shows me undefined value

    return (
        <div className="field-group">
            <select name={name} id="customer-language" onChange={e => setLanguageChoice(e.target.value)} value={languageChoice}>
                <option value="en" defaultValue>English</option>
                <option value="es">Spanish</option>
            </select>
        </div>
    )
}

export default Select

I have a "dd()" in my controller to check if the values is passed but it only recieve the email, any idea of what I'm missing?.

Answer 1

I have updated your code, would you please try this.

import React, {useState} from "react"

import { useForm } from "@inertiajs/inertia-react"

import LoadingButton from "@/base/elements/LoadingButton"
import TextInput from "@/base/forms/fields/TextInput"
import Select from "@/base/forms/fields/Select"

const UserFormData = ({ customer }) => {
  const [languageChoice, setLanguageChoice] = useState("en")
  const { data, setData, errors, post, processing } = useForm({
    email: customer.email,
    language: languageChoice,
  });
  function handleSubmit(e) { 
    e.preventDefault()
    post("/change-language-profile")
  }
  return (
    <section>
        <form onSubmit={handleSubmit}>
          <fieldset>
            <legend>Contact data</legend>
            <div className="fields-wrapper">
              <TextInput
                label="Fullname"
                name="fullname"
                type="text"
                value={customer.fullname}
                readOnly
              />
              <TextInput
                label="Email"
                name="email"
                type="email"
                value={customer.email}
                readOnly
              />
              <TextInput
                label="Phone"
                name="phone"
                type="phone"
                value="+34 654 321 000"
                readOnly
              />
              <Select
                label="Language"
                name="language"
                setLanguageChoice={setLanguageChoice}
                languageChoice={languageChoice}
              />
              <LoadingButton
                type="submit"
                loading={processing}
                className="btn-indigo"
              >
                Change Language
              </LoadingButton>
              </div>
          </fieldset>
        </form>
    </section>
  )
}
export default UserFormData

Select component:

import React, {useState} from "react"

const Select = ({name, value, setLanguageChoice, languageChoice}) => {
    // const handleChange = event => {
    //     this.setState({value: event.target.value})
    // }
    console.log(languageChoice) // This shows me undefined value

    return (
        <div className="field-group">
            <select name={name} id="customer-language" onChange={e =>  setLanguageChoice(e.target.value)} value={languageChoice}>
                <option value="en" defaultValue>English</option>
                <option value="es">Spanish</option>
            </select>
        </div>
    )
}

export default Select

Answer 2

I solve my problem, the thing is that I didn't realize that I was alredy using a "helper" of Inertia that acts like a Hook , to be more specific like the useState().

So the thing is that I have to pass the value to my component Select and on the onCgange , the function that will update the value of my component.

So in the Form I need to replace this:

  const { data, setData, errors, post, processing } = useForm({
    email: customer.email,
    language: '',
  });

to this :

  const { data, setData, errors, post, processing } = useForm({
    email: customer.email,
    language: 'en',
  });

pass correctly the value and the onChange on my component:

(after)

      <Select
        label="Language"
        name="language"
        onChange={e => setData("language", e.target.value)}
      />

(before)

      <Select
        label="Language"
        name="language"
        value={data.language}
        onChange={e => setData("language", e.target.value)}
      />

And on my Select component will be like this:

import React from "react"

const Select = ({name, value, onChange}) => {

    return (
        <div className="field-group">
            <select name={name} id="customer-language" onChange={onChange} value={value}>
                <option value="en" defaultValue>English</option>
                <option value="es">Spanish</option>
            </select>
        </div>
    )
}

export default Select