We Keep Coding

React JS Routing on 2 Option Values

I am new to React and I'm having a hard time figuring out how to return (or route to) a new page based off of two user selected options? I am trying to load a unique set of buttons for the user to select from depending on the options that they select. When reselecting different options the page would reload with the appropriate buttons.
import React from 'react';
import "./App.css";
import "./styles.css"
import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
import ObservationText from './components/ObservationText/ObservationText';
import { Dropdown } from 'bootstrap';
/*
let activity = document.getElementById('Activity-Type');
let role = document.getElementById('Role-Type');
activity.addEventListener('change', () => update());
role.addEventListener('change', () => update());
function update(){
const roleValue = document.getElementById('Role-Type').value;
const activityValue = document.getElementById('Activity-Type').value;
//console.log(activityValue + roleValue);
switch (activityValue + roleValue){
case 'ND_A18_FP1VO1-CREW' :
ND_A18_FP1VO1CREW();
break;
default:
//consle.log('this is the default message');
break;
}
}
function ND_A18_FP1VO1CREW(){
alert('ND A18 FP1 + VO1-CREW Selected');
}
*/
function getActivity(el){
const option = el.value;
if(option ==='esc')return
console.log(option)
return option;
}
function getRole(el){
const option = el.value;
if(option ==='esc')return
console.log(option)
return option;
}
function App(){
return (
<div className="App">
<Header/>
<h1>
<label htmlFor ="Activity-Type" className ="sideBySideField">Activity
<select id="Activity-Type" onChange={e => getActivity(e.target)}>
<option value="" disabled="" defaultValue=""> Select... </option>
<option value="ND A18 FP1">ND_A18_FP1</option>
<option value="ND A18 FP2">ND_A18_FP2</option>
<option value="ND BPLANE">ND_BPLANE</option>
<option value="NM A18 FP2">NM_A18_FP2</option>
<option value="AK A18 FP3">AK_A18_FP3</option>
</select>
</label>
<label htmlFor="Role" className ="sideBySideField">Role
<select id="Role-Type" onChange={e => getRole(e.target)}>
<option value="" disabled="" defaultValue=""> Select... </option>
<option value="Other General">Other-General</option>
<option value="VO1 CREW">VO1CREW</option>
<option value="VO2-CREW">VO2CREW</option>
<option value="VO3-CREW">VO3CREW</option>
<option value="VO4-CREW">VO4CREW</option>
<option value="EO2-EO Observer">EO2EO_Observer</option>
<option value="EO1-EO Observer">EO1EO_Observer</option>
<option value="Observer 1-GCS Observer">Observer1GCS_Observer</option>
<option value="FTD-Flight Test Director">FTDFlight_Test_Director</option>
</select>
</label>
</h1>
<div class="center">
<ObservationText/>
</div>
<Footer/>
</div>
);
}
export default App;

React form hooks How to validate select option

I am working with reach hooks and to validate my form fields I am using react-hook-form as it is the best option for now
SO to validating my normal input fields I am doing just ref={register({ required: true })} then on submit it is checking for errors as I am importing errors from react-hook-form
But when I am doing same for select field it is not checking the error object
This is what I am doing
<label htmlFor="func" className="form_label">
Select function
</label>
<select name="func" ref={register({ required: true })}>
<option selected disabled>
Select function
</option>
<option value="5">Function 2</option>
<option value="6">Function 3</option>
</select>
{errors.func && (
<div>
<span>Function is required</span>
</div>
)}
I don't know what I am missing
My actual code is with dynamic data
so I am looping it like this
<Form.Control as="select" custom>
<option disabled selected>Select role</option>
{loading === false &&
data.get_roles.map((li) => (
<option value={li.user_type_id}>
{li.user_type}</option>
))}
</Form.Control>
React hook form

try this code. I tried and it worked fine:
<label htmlFor="func" className="form_label">
Select function
</label>
<select name="func"
ref={register({
required: "select one option"
})}>
<option value=""></option>
<option value="5">Function 2</option>
<option value="6">Function 3</option>
</select>
{errors.func && <p style={{color:'red'}}> {errors.func.message}</p> }

//This Works for me
import React from 'react'
import { useForm } from "react-hook-form";
function Test() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = data => console.log(data);
return (
<div>
<form onSubmit={handleSubmit(onSubmit)}>
<select
className="custom-select"
id="selectmethod"
defaultValue=""
name="exampleRequired"
{...register("exampleRequired", { required: true })}
>
<option value="" disabled>Select Option</option>
<option value="1">Blue</option>
<option value="2">Red</option>
</select>
{errors.exampleRequired && <span className="formError errorMssg">This field is required</span>}
<br/>
<button type="submit" >SUBMIT </button>
</form>
</div>
)
}
export default Test

I think that I good way to validate forms is with yup. It gives you a lot of tools for validation and its integration with RHF is seamlessly: How to integrate yup with react-hook-form
import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "#hookform/resolvers/yup";
const schema = yup.object().shape({
mySelect: yup.string().notOneOf([""], "You must select an option!")
});
function MyForm() {
const {
register,
handleSubmit,
formState: { errors }
} = useForm({
defaultValues: {
mySelect: ""
},
resolver: yupResolver(schema)
});
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<select {...register("mySelect")}>
<option value="" disabled>
Select option
</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<button type="submit">Submit </button>
{errors.mySelect && <p className="error">{errors.mySelect.message}</p>}
</form>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<MyForm />, rootElement);
Sandbox: Simple select validation with yup

How to get the value of a dropdown menu in ReactJS

I'm trying to get the value of a dropdown menu that looks like this:
<ul className="tabs" data-component={true}>
<li>
<section className="sort-list" data-component={true}>
<select value={0} className="sort" data-element={true}>
<option key="0" value="0">Any Topic</option>
<option key="1" value="1">Art</option>
<option key="2" value="2">Auto</option>
//...and so on
I've seen similar questions, but trying to alert(sort).value won't work (along with some other variants) so I think I need to string together my selectors?
I can use either the value or the text, as the goal is to keep the filter applied even when a user goes back to the previous page.
How do I get the key, value, or text of the options?

You need to add onchage event to your select.
change = (event) => {
this.setState({
topic: event.target.value
})
}
<select onChange={this.change} value={0} className="sort" data-element={true}
<option key="0" value="0">Any Topic</option>
<option key="1" value="1">Art</option>
<option key="2" value="3">Auto</option>
</select>
DEMO
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
constructor() {
super();
this.state = {
topic: ''
};
}
change = (event) => {
this.setState({
topic: event.target.value
})
}
render() {
return (
<div>
<p>
Selected topic: {this.state.topic}
</p>
<select onChange={this.change} className="sort" data-element={true}>
<option key="0" value="0">Any Topic</option>
<option key="1" value="1">Art</option>
<option key="2" value="2">Auto</option>
</select>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
</script>

The Reactjs way would be to have a select box component which has an onChange handler. Something like this:
class MySelect extends React.Component {
onChange = (val) => {
// save the val somewhere..
this.setState({currentVal: val})
}
render() {
return <select onChange={this.onChange}> { getOptions() } </select>
}
}

Add onChange property to element.
Here is a simple code snippet for a working example.
import React, { useState } from 'react';
import { oneOfType, string, number } from 'prop-types';
function MyDropdown({ selected: preSelected }) {
const [selected, setSelected] = useState(preSelected);
const onChange = evt => {
setSelected(evt.target.value);
}
return (
<div>
<select onChange={onChange} value={selected}>
<option value={1}>Opption 1</option>
<option value={2}>Opption 2</option>
<option value={3}>Opption 3</option>
</select>
{selected && <div>Selcted: {selected}</div>}
</div>
)
}
MyDropdown.propTypes = {
selected: oneOfType([string, number])
};
MyDropdown.defaultProps =
selected: 1
};
You can also check it live on CodeSandbox: https://codesandbox.io/s/react-codesandbox-2voc6

How to select option with JavaScript?

I have a problem with select in JavaScript. I'd like to change option of select. The option is changing, but text is default. Why is that? What can I change in my code? I need timeout, because script is loading slowly.
setTimeout(() => {
if(this.props.Locale === "en-EN") {
let country = document.getElementById("Country");
country.getElementsByTagName("option")[10].selected = "selected";
}
}, 3000);

You can control the selected option using the value property of the select component. You can bind it to an item in state and then set that to whatever you need. I've given an example below, which isn't particularly great code, but gives a demonstration of how this might work:
class App extends React.Component {
state = {
selectedOption: 2,
}
updateSelectedOption(newValue) {
this.setState({
selectedOption: newValue
});
}
render() {
return (
<div>
<select
onChange={({ target }) => { this.updateSelectedOption(target.value) }}
value={this.state.selectedOption}
>
<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>
</select>
<button onClick={() => this.updateSelectedOption(1)}>1</button>
<button onClick={() => this.updateSelectedOption(5)}>5</button>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

How to use react ref to get value from html select element?

I have a form in which I am using html select element.
<select className="form-control" id="ntype" required >
<option value = "">None</option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
</select>
I know with html input type element we can attach ref like below code
ref = {(input) => { this.nHeading = input; }}
and
<input
type = "text"
className = "form-control"
id = "tInput"
placeholder = "Sample input"
ref = {(input) => { this.sInput = input; }}
required
/>
How can I attach ref to <Select> element and get selected option value from the attached ref when form is submitted?
Do I need to attach ref to each options or select element itself?

You can store the value in a state on change and later use that i.e make it a controlled component
class App extends React.Component {
constructor() {
super();
this.state = {selectValue: ''}
}
callThis = (e) => {
this.setState({selectValue: e.target.value}, ()=> {console.log(this.state.selectValue)});
}
render() {
return (
<select onChange={this.callThis}className="form-control" id="ntype" required >
<option value = "">None</option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
</select>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
Or you can use refs to get the value like this
class App extends React.Component {
constructor() {
super();
this.state = {selectValue: ''}
}
callThis = (e) => {
console.log(this.selectVal.value)
}
render() {
return (
<div><select ref={(input) => this.selectVal = input} className="form-control" id="ntype" required >
<option value = "">None</option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
</select>
<input type="button" value="click" onClick={this.callThis}/></div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

I would give each element a value and onChange handler for the select element like this
<select className="form-control"onChange={this.onChange.bind(this)}>
<option value="">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
And define an onChange handler that sets the state of the selection
onChange(e){
this.setState({value: e.target.value}, function(){
// do other stuff
});
}

If you are using React functional components, you can do the following.
import { useState, useRef } from 'react';
...
const selectRef = useRef(null)
<select className="form-control" id="ntype" required ref={selectRef}>
<option value = "">None</option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
</select>
then you can access the value in your submit logic by,
selectRef.current.value

You can just use an onChange function to set the value of the Ref. E.g.:
<select className="form-control" id="ntype" required onChange={e => {yourRef.current = e.target.value}} >
<option value = "">None</option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
</select>