Develop Reference

React Material-ui Select

After i implemented my application, i wanted to style it with Material UI.
When changing from html to Material i started recieving a warning when clicking select item:
index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference.
Initial code:
<label htmlFor="newRole">Role</label>
<select
name="newRole"
id="newRole"
value={newUser.newRole}
onChange={handleChangeNew}
>
<option value="0">Student</option>
<option value="2">Professor</option>
<option value="3">Secretary</option>
</select>
Material UI code:
<InputLabel shrink id="role-lbl"> Role </InputLabel>
<Select
labelId="role-lbl"
name="newRole"
id="newRole"
value={newUser.newRole}
onChange={handleChangeNew}
// displayEmpty
variant="filled"
>
<MenuItem value="0">Student</MenuItem>
<MenuItem value="2">Professor</MenuItem>
<MenuItem value="3">Secretary</MenuItem>
</Select>

That is a little bit strange but I can not reproduce your warning. But as I faced it several times I can give you two advices how to fix it.
(not recommend) Just remove <React.StrictMode> wrapper on your <App />
useRefs. The idea might look like this:
import {InputLabel, MenuItem, Select} from "#material-ui/core";
import {useRef} from "react";
export default function Example3() {
const nodeRef = useRef(null);
function handleChangeNew(){
console.log('changed');
}
return(
<>
<InputLabel shrink id="role-lbl"> Role </InputLabel>
<Select
noderef={nodeRef}
labelId="role-lbl"
id="newRole"
value={newUser.newRole}
onChange={handleChangeNew}
// displayEmpty
variant="filled"
>
<MenuItem value="0" ref={nodeRef}>Student</MenuItem>
<MenuItem value="1" ref={nodeRef}>Professor</MenuItem>
<MenuItem value="2" ref={nodeRef}>Secretary</MenuItem>
</Select>
</>
)
}

Appending MenuItems to Material-UI Select Input in React

So I'm not great with react or even javascript, but what I'm trying to do is take this react element:
const selectItem = (
<Select defaultValue="" id="type-select" label="Type">
<MenuItem value="">
<em>None</em>
</MenuItem>
</Select>
)
and append both subheader items and MenuItems from this:
Object.keys(greatSet).forEach(o => {
let subHeader = React.createElement('ListSubHeader',{class:'grouped-stuff'},o)
selectItem.appendChild(subHeader)
greatSet[o].forEach(option => {
let menuItem = React.createElement('MenuItem',{value: option.id}, option.name)
selectItem.appendChild(menuItem)
})
})
greatSet an object with key: array of objects, if that isn't clear.
What I want is similar to this:
<Select defaultValue="" id="grouped-select">
<MenuItem value="">
<em>None</em>
</MenuItem>
<ListSubheader>Category 1</ListSubheader>
<MenuItem value={1}>Option 1</MenuItem>
<MenuItem value={2}>Option 2</MenuItem>
<ListSubheader>Category 2</ListSubheader>
<MenuItem value={3}>Option 3</MenuItem>
<MenuItem value={4}>Option 4</MenuItem>
</Select>
What is the best way to do this?

JSX: Conditional statement within a map

I'm trying to understand how to incorporate conditional statements within JSX. I have an array of objects that I'm mapping to a select box. I want to exclude items that include the substring "threshold" in indicator.name.
So I can't use a ternary operator, because there's no "or" item. But I can't figure out how to include an if statement within this map. Whatever I try I get an error.
<select
defaultValue={defaultValue}
onChange={e => setIndicator(e.currentTarget.value)}
disabled={loading}
>
<option key='' value=''>
Select
</option>
{indicatorList.map(indicator => (
<option key={indicator.name} value={indicator.name}>
{indicator.label}
</option>
))}
</select>

you can filter then map:
<select
defaultValue={defaultValue}
onChange={e => setIndicator(e.currentTarget.value)}
disabled={loading}
>
<option key='' value=''>
Select
</option>
{indicatorList.filter(indicator=>indicator.name.includes('threshold')).map(indicator => (
<option key={indicator.name} value={indicator.name}>
{indicator.label}
</option>
))}
</select>
Or return null:
<select
defaultValue={defaultValue}
onChange={e => setIndicator(e.currentTarget.value)}
disabled={loading}
>
<option key='' value=''>
Select
</option>
{indicatorList.map(indicator => (
indicator.name.includes('threshold')?<option key={indicator.name} value={indicator.name}>:nul
{indicator.label}
</option>
))}
</select>

I would recommend using the filter method to filter out "threshold". This would return the array you are expecting to have inside JSX

Change text colour of placeholder in select drop down - Material-ui

I have a material-ui select component that presents a drop down of options to the user. The placeholder text shows as "select option" to tell the user to select the options they want. This is shown in light grey text, but because the text colour is so light it could be hard for colour blind people to read. Because of that I want to make the text colour darker but am not sure how. I don't want to make the placeholder one of the options within the dropdown if possible.
Code for the select component is:
<Select
options = {options}
isMulti
placeholder= "Select Options"
value = {this.selectedOptions"
onChange={this.changeH}
className = SelectOptionsDropDown
/>
Styling within the .css file is:
.SelectOptionsDropDown {
text-align: center;
margin: 10px;
}
This styling works fully

Can you try this approch?
<Select
fullWidth
size="small"
displayEmpty
inputProps={{ 'aria-label': 'select' }}
value={age}
onChange={handleChange}/>
<MenuItem value="" disabled>
<em style={{color:"#9E9E9E"}}>Placeholder</em>
</MenuItem>
<MenuItem value={'A'}>Option A</MenuItem>
<MenuItem value={'B'}>Option B</MenuItem>
<MenuItem value={'C'}>Option C</MenuItem>
</Select>

You can use ::placeholder, like below :
.SelectOptionsDropDown::placeholder{
color: red;
}
Please note, it's not supported in IE, check here.

How can I use name, ref, defaultValue in select-option like text? - in React Meteor

I have created a Meteor project with ReactJS.
For the Create/Edit page, I use the same page, in text input, I have the following code:
<FormGroup>
<ControlLabel>Province</ControlLabel>
<input
type="text"
className="form-control"
name="province"
ref={province => (this.province = province)}
defaultValue={regs && regs.province}
/>
</FormGroup>
To get the same result.
How can I use name, ref, defaultValue in select-option, checkbox, radio,..etc. like text?
<FormGroup controlId="formControlsSelect">
<ControlLabel>Sex</ControlLabel>
<FormControl componentClass="select" name="sex" ref={sex => (this.sex = sex)} defaultValue={regs && regs.sex}>
<option value="male">Male</option>
<option value="female">Female</option>
</FormControl>
</FormGroup>

Thank you very much to pawel.
I can solve this by changing
<FormControl ref=....> to <FormControl inputRef=...>