Develop Reference

I am working on the currency converter webapp with the fixer api

I have successfully fetched all the values. But i want to populate all of the values {currencyOptions} into the "select" option which is in the another component. How can I do that .
const [currencyOptions, setCurrencyOptions] = useState([]);
console.log(currencyOptions);
<div className="App">
<h1>Convert Currency</h1>
<CurrencyRow currencyOptions={currencyOptions} />
<SiConvertio className="convert" />
<CurrencyRow currencyOptions={currencyOptions} />
</div>
Here is the currency option component which I
const CurrencyRow = () => {
return (
//
<Container>
<Row>
<Input type="number" className="input" />
<select>
<option value="abx">abc</option>
</select>
</Row>
</Container>
);
};

You want to populate your dropdown with your currencyOptions state. Assuming your state has all the items and it's a list you want to return an option element for each item when rendering your component, something like:
currencyOptions.map((currencyOption, index) => (
<option key={index} value={currencyOption}>{currencyOption}</option>
));
Also try to use an id as the element key instead of the index if you have got one.

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

How to show placeholder value on React/Formik Select Component?

I have a dropdown Select component. This component displays the values of the elements, that we get from the server. In the following schema:
[
{label: 1, value: 1},
{label: 2, value: 2},
{label: 3, value: 3},
]
I am using Formik and map through the data, to get the values. Problem is, that I don't have a placeholder value, thus users think the value is already selected.
I am reading through the formik examples and I am not founding anything similar.
Here is a working example, from the formik examples
I am trying to force the placeholder, as an option, but that doesn't work. Any ideas?
<div className="py-3">
<label>
<span className="font-weight-bold">Select Group</span>
<span className="text-danger">*</span>
</label>
<Field
name="group"
component="select"
placeholder="Select Group (Just one)"
className={classNames('form-control', {
'is-invalid': errors.group && touched.group
})}
>
{groups.map(group => (
<option key={group.label} value={group.value}>
{group.value}
</option>
))}
</Field>
{errors.group && touched.group ? (
<div className="text-danger">{errors.group}</div>
) : null}
</div>
Currently, the groups have initial value of the first item returned from the server.
I want to display the placeholder, like in the code above. This one placeholder="Select Group (Just one)"

Apparently, there are a lot of ways to do this. I chose the easiest one. I just added a defaultValue tag in a second option field. This allows the default value to be displayed and you can choose through the mapped options on render dropdown:
Like this:
<div className="py-3">
<label>
<span className="font-weight-bold">Select Group</span>
<span className="text-danger">*</span>
</label>
<Field
name="group"
component="select"
className={classNames('form-control', {
'is-invalid': errors.group && touched.group
})}
>
<option defaultValue>Select Group (Just one)</option>
{groups.map(group => (
<option key={group.label} value={group.value}>
{group.value}
</option>
))}
</Field>
</div>

How to make a 'Select' component as required in Material UI (React JS)

I want to display like an error with red color unless there is a selected option.
Is there any way to do it.

For setting a required Select field with Material UI, you can do:
class SimpleSelect extends React.PureComponent {
state = {
selected: null,
hasError: false
}
handleChange(value) {
this.setState({ selected: value });
}
handleClick() {
this.setState(state => ({ hasError: !state.selected }));
}
render() {
const { classes } = this.props;
const { selected, hasError } = this.state;
return (
<form className={classes.root} autoComplete="off">
<FormControl className={classes.formControl} error={hasError}>
<InputLabel htmlFor="name">
Name
</InputLabel>
<Select
name="name"
value={selected}
onChange={event => this.handleChange(event.target.value)}
input={<Input id="name" />}
>
<MenuItem value="hai">Hai</MenuItem>
<MenuItem value="olivier">Olivier</MenuItem>
<MenuItem value="kevin">Kevin</MenuItem>
</Select>
{hasError && <FormHelperText>This is required!</FormHelperText>}
</FormControl>
<button type="button" onClick={() => this.handleClick()}>
Submit
</button>
</form>
);
}
}
Working Demo on CodeSandBox

Material UI has other types of Select(native) also where you can just use plain HTML required attribute to mark the element as required.
<FormControl className={classes.formControl} required>
<InputLabel htmlFor="name">Name</InputLabel>
<Select
native
required
value={this.state.name}
onChange={this.handleChange}
inputProps={{
name: 'name',
id: 'name'
}}
>
<option value="" />
<option value={"lala"}>lala</option>
<option value={"lolo"}>lolo</option>
</Select>
</FormControl>
P.S. https://material-ui.com/demos/selects/#native-select

The required prop only works when you wrap your elements inside a <form> element, and you used the submit event to submit the form.
this is not related to react, this is pure HTML.
In MUI v5 (2022), it works like this:
const handleSubmit = (e)=>{
e.preventDefault()
// ...
}
return (
<form onSubmit={handleSubmit}>
<Select required value={val} onChange={handleChange} required>
<MenuItem value="yes">Yes</MenuItem>
<MenuItem value="no">No</MenuItem>
</Select>
<Button type="submit">Submit</Button>
</form>
)
As you can see, it works the same way you think it should work, so what your code should probably be similar to this.
But the required prop only works when you wrap your elements inside a element, and you used the submit event to submit the form.
And if you're using <FormControl>, but the required prop on both elements:
<FormControl required>
<Select required>
// ...
</FormControl>

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=...>