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
Related
onClick event not working with <option> tag. How to use onClick event with select option tag. Each option must be given a different parameter.
async function localization(language) {
localStorage.setItem("language", language);
}
useEffect(() => {
localization(localStorage.getItem("language"));
}, []);
return(
<select>
<option onClick={() => localization("ru")}>
<RussinFlagIcon /> Ru
</option>
<option onClick={() => localization("uz")}>
<UzbekistanFlagIcon /> Uz
</option>
<option onClick={() => localization("en")}>
<UKFlagIcon /> En
</option>
</select>
)
Use onChange instead, it's how you should be working when it comes to <select>. You can do something like this:
Notice value attribute on <option>. The selected option's value will be the value of the <select>.
return(
<select onChange = {(e)=> localization(e.target.value)}>
<option value = "ru">
<RussinFlagIcon /> Ru
</option>
<option value= "uz">
<UzbekistanFlagIcon /> Uz
</option>
<option value="en">
<UKFlagIcon /> En
</option>
</select>
)
Normally the select is used with a [form][1], then you should use the onChange callback:
const Select = () => {
const handleChange = (e) => localStorage.setItem("language", e.target.value);
return (
<label>
<select name="languages" onChange={handleChange}>
<option onClick={() => localization("ru")}>
<RussinFlagIcon /> Ru
</option>
<option onClick={() => localization("uz")}>
<UzbekistanFlagIcon /> Uz
</option>
<option onClick={() => localization("en")}>
<UKFlagIcon /> En
</option>
</select>
</label>
);
};
Then some comments about your code:
Your async function localization does not have to be async if you don't have a Promise in it.
And your useEffect does not do much except store the language in the localStorage based on the localStorage value ...
[1]: https://www.w3schools.com/TAGS/att_select_form.asp
How can I display multiple options tag in my Select component ?
Here's my component :
<Select
id='myID'
name='myName'>
{
(
(localStorage.getItem("localStorageKey").includes("John"))
?
<option key=1 value=myFirstValue>Option 1</option>
:
`
"Something else here"
`
)
}
</Select>
So far if I put just one option it's working, but if I add another one, say :
<Select
id='myID'
name='myName'>
{
(
(localStorage.getItem("localStorageKey").includes("John"))
?
<option key=1 value=myFirstValue>Option 1</option>
+
<option key=2 value=mySecondValue>Option 2</option>
:
`
"Something else here"
`
)
}
</Select>
It won't display anything
<>
<option key=1 value=myFirstValue>Option 1</option>
<option key=2 value=mySecondValue>Option 2</option>
</>
Wrap you options like this
In order to have more than one JSX element as sibling, It should be wrapped either in a React Fragment or in an array.
<> is a short hand for <React.Fragment>
<Select
id='myID'
name='myName'>
{
(localStorage.getItem("localStorageKey").includes("John"))
?
<>
<option key={1} value="myFirstValue">Option 1</option>
<option key={2} value="mySecondValue">Option 2</option>
</>
: "Something else here"
}
</Select>
By using array,
[<option key={1} value="myFirstValue">Option 1</option>,
<option key={2} value="mySecondValue">Option 2</option>]
I have created a 3 select option inputs based on 1st selection option it should populate the 2nd dropdown and based on 1st and 2nd selected option then it should populate the 3rd dropdown.
Unexpected token
const availableState = data.countries.find((c) => c.name === selectedCountry);
const availableCities = availableState?.states?.find((s) => s.name === selectedState);
render method select options
<div>
<label>Country</label>
<select
placeholder="Country"
value={selectedCountry}
onChange={(e) => setSelectedCountry(e.target.value)}
>
<option>--Choose Country--</option>
{data.countries.map((value, key) => {
return (
<option value={value.name} key={key}>
{value.name}
</option>
);
})}
</select>
</div>
<div>
<label>State</label>
<select
placeholder="State"
value={selectedState}
onChange={(e) => setSelectedState(e.target.value)}
>
<option>--Choose State--</option>
{availableState?.states.map((e, key) => {
return (
<option value={e.name} key={key}>
{e.name}
</option>
);
})}
</select>
</div>
<div>
<label>City</label>
<select
placeholder="City"
value={selectedCity}
onChange={(e) => setSelectedCity(e.target.value)}
>
<option>--Choose City--</option>
{availableCities?.cities.map((e, key) => {
return (
<option value={e.name} key={key}>
{e}
</option>
);
})}
</select>
</div>
There is an input in which there should be several additional attributes to help the user
I can insert these attributes, but the redux form will return a whole line, and I only need an email, how to make it return only email
<Field component={SelectUser} name="SendTo" validate={[required]} id="age-native-simple">
<option value="" />
{
props.initialValues.users.map((p, index) => (
<option key={index}>{p.FIO+" "+p.Email+" "+p.Otdel}</option>
))}
</Field>
try this:
<Field component={SelectUser} name="SendTo" validate={[required]} id="age-native-simple">
<option value="" />
{
props.initialValues.users.map((p, index) => (
<option value={p.Email} key={index}>{p.FIO+" "+p.Email+" "+p.Otdel}</option>
))}
</Field>
Make an array by splitting the string by white space, and return 4th element, given that it's always in the same position.
I have a problem here. I have an react api and i want to make a select box to filter data by specific attribute.
constructor() {
super();
this.state = {
results: []
};
}
I receive a list of items with name and ratings. And I want to filter with select. If I want to see just items with 5 rating or greater, select 5.
return (
<div className="container clearfix">
{/* value={props.search} */}
<select>
<option value="" />
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
</select>
<div>
{props.results
.map(item=> (
<div key={item.id} className="item-holder">
<img src={`${imagePath}${item.image}`} />
<span className="votes">{item.rating}</span>
<p>{item.title}</p>
</div>
))}
</div>
</div>
);
TX!
You need to attach a listener to Select e.g.
<Select onChange={(event) => this.setState({filterValue: event.target.value})}
then you can filter the results with
props.results.filter((item) => item.rating >= this.state.filterValue)
.map(...)