Correct pattern for router change from select box onChange event
Answered
Red-winged Blackbird posted this in #help-forum
Red-winged BlackbirdOP
I'm trying to determine the correct pattern for a serverside component that has a selectbox input that serves as navigation.
My understanding is that you should define "onChange" to a function, i.e. a "handleChange" function in the component, but I'm not clear on what that function signature should be so that the "value" field of the selected object is passed to "handleChange". See code with question marks below:
My understanding is that you should define "onChange" to a function, i.e. a "handleChange" function in the component, but I'm not clear on what that function signature should be so that the "value" field of the selected object is passed to "handleChange". See code with question marks below:
handleChange(???) {
const selectedCountry = ???
redirect("/" + selectedCountry);
}
render() {
return (
<div>
<select id="location" onChange=???>
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="mx">Mexico</option>
</select>
</div>
)
}Answered by Ray
yes, you could use
form element if you want it to be server component6 Replies
@Red-winged Blackbird I'm trying to determine the correct pattern for a serverside component that has a selectbox input that serves as navigation.
My understanding is that you should define "onChange" to a function, i.e. a "handleChange" function in the component, but I'm not clear on what that function signature should be so that the "value" field of the selected object is passed to "handleChange". See code with question marks below:
handleChange(???) {
const selectedCountry = ???
redirect("/" + selectedCountry);
}
render() {
return (
<div>
<select id="location" onChange=???>
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="mx">Mexico</option>
</select>
</div>
)
}
you should be able to access the value with
e.target.value function handleChange(e: ChangeEvent<HTMLSelectElement>) {
const selectedCountry = e.target.value
redirect("/" + selectedCountry);
}Red-winged BlackbirdOP
Thanks @Ray but this would force it to be a client-side component, right? i.e. using
use client at the beginning of the file? I probably need to read a bit more about server side vs client side components@Red-winged Blackbird Thanks <@743561772069421169> but this would force it to be a client-side component, right? i.e. using `use client` at the beginning of the file? I probably need to read a bit more about server side vs client side components
yes, you could use
form element if you want it to be server componentAnswer
@Red-winged Blackbird Thanks <@743561772069421169> but this would force it to be a client-side component, right? i.e. using `use client` at the beginning of the file? I probably need to read a bit more about server side vs client side components
<form action="/">
<select id="location" name="location">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="mx">Mexico</option>
</select>
<button>Change</button>
</form>when the Change button pressed, it will navigate to
/?location=valuebtw, it will need to be client component if you want the url change when the value is selected
Red-winged BlackbirdOP
Appreciate the help, thanks!