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>
Related
I have two Select input to display data. lets say 1 Select is for product and other for display product list based on selected product in select 1. But i had an error that react didnt display my view. after i command the second Select it is run normally.
this is my Select input to select product and coverage:
<div>
<Select onChange={handleChangeSelect} value={TocId} name="ProductID" size="sm">
{TOC.map((type, index) => (
<Select.Option key={type.id} value={type.id}>
{type.desc}
</Select.Option>
))}
</Select>
<Select onChange={handleChangeSelect} value={TocId} name="ProductID" size="sm">
{Coverage.map((type, index) => (
<Select.Option key={type.id} value={type.id}>
{type.desc}
</Select.Option>
))}
</Select>
</div>
i get the coverage data by hit the api, after select product using hooks state
Like this:
const getCoverage = () => {
axios.post( url, data, headers).then(function (response){
if(response.data.Data == 'success') {
setCoverage(response.data.Data)
}
})
}
const handleChangeSelect = (e) => {
setTocId(e);
console.log(TocId);
getCoverage();
};
Hard to tell without seeing the rest of your code but are you fetching Coverage for the first time in handleChangeSelect?
If so, that would be the issue since Coverage doesn't exist in your first render.
A potential workaround could be to make the Coverage options render conditionally.
<div>
<Select onChange={handleChangeSelect} value={TocId} name="ProductID" size="sm">
{TOC.map((type, index) => (
<Select.Option key={type.id} value={type.id}>
{type.desc}
</Select.Option>
))}
</Select>
<Select onChange={handleChangeSelect} value={TocId} name="ProductID" size="sm">
{Coverage && Coverage.length > 0 && Coverage.map((type, index) => (
<Select.Option key={type.id} value={type.id}>
{type.desc}
</Select.Option>
))}
</Select>
</div>
It looks fine. As per my perception, it's an issue of empty state rendering. Render your component conditionally. Also, put a different name prop.
<div>
<Select
onChange={handleChangeSelect}
value={TocId}
name="ProductID"
size="sm"
>
{TOC?.map((type, index) => (
<Select.Option key={type.id} value={type.id}>
{type.desc}
</Select.Option>
))}
</Select>
<Select
onChange={handleChangeSelect}
value={TocId}
name="ProductID"
size="sm"
>
{Coverage?.map((type, index) => (
<Select.Option key={type.id} value={type.id}>
{type.desc}
</Select.Option>
))}
</Select>
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
I would to display multiple items in a select dropdown.
This is the code. But what i get back are many selects, one for each item i wanted to display in the dropdown.
mostraReferti(id) {
axios.get('http://localhost:8080/api/REFERTOs/' + id)
.then(response => {
this.setState({ referti: response.data }, () => {
console.log("response.data")
console.log("THIS.STATE", this.state);
})
})
.catch(err => console.log(err))
}
render() {
const refertiItems = this.state.referti.map((referti, i) => {
return (
<RefertiItems key={referti.hash_referto} item={referti} />
)
})
<Form>
<Label for="type" text="Referto" />
<div className="custom-select">
{refertiItems}
</div>
</Form>
And RefertiItems is :
render(){
console.log("SONO DENTRO")
return (
<div className={styles}>
<div className= "custom-select">
<Label for="type" text="Codice Referto" />
<select
name="codiceReferto"
placeholder="Selezionare Referto"
onKeyPress={this.onEnter} //allows you to move to the next panel with the enter key
value={this.codiceReferto}
onChange={this.handleInputChange}>
<option default value="vuoto"></option>
<option>{this.state.item.tipo_esame}-
{this.state.item.data_esame}</option>
</select>
</div>
</div>
What am i doing wrong?
First of all you have an issue with formatting. It is really difficult to understand something from code with wrong indents.
To fix your main issue you don't need to repeat your select component, just repeat options and pass it inside your select component, for example:
render() {
return (
<Form>
<Label for="type" text="Referto" />
<div className="custom-select">
<RefertiItems items={refertiItems} />
</div>
</Form>
);
}
RefertiItems:
render() {
const refertiItems = this.props.items.map((referti, i) => {
return (
<option key={referti.hash_referto}>
{referti.tipo_esame}-{referti.data_esame}
</option>
)
});
return (
<div className={styles}>
<div className= "custom-select">
<Label for="type" text="Codice Referto" />
<select
name="codiceReferto"
placeholder="Selezionare Referto"
onKeyPress={this.onEnter}
value={this.codiceReferto}
onChange={this.handleInputChange}
>
<option default value="vuoto"></option>
{refertiItems}
</select>
</div>
</div>
)
}
I am new on React.
I have a condition which is to loop the form, please help me
Here is the code:
this.state.products.map(product => {
<form onSubmit={this.handleSubmit}>
<select name="size" className="form-control" style={{height: '46px;'}}>
<option key="1" value="1">Red</option>
<option key="2" value="2">Yellow</option>
<option key="3" value="3">Green</option>
</select>
<input type="submit" value="Pick This" className="form-control" onClick={() => this.handleSubmit} />
</form>
});
If there was 3 form, how to get the selected value from clicked submit button form?
Or is there another simple way?
Thank you
One method would be changing how your onSubmit function is handled.
So you could pass which index of products you are submitting like so
this.state.products.map((product, i) => {
<form onSubmit={event => this.handleSubmit(event, i)}>
<select name="size" className="form-control" style={{height: '46px;'}}>
<option key="1" value="1">Red</option>
<option key="2" value="2">Yellow</option>
<option key="3" value="3">Green</option>
</select>
<input type="submit" value="Pick This" className="form-control" onClick={() => this.handleSubmit} />
</form>
});
It also looks like your form is uncontrolled, which another possibly is having the select change a value in state.
<select name="size" onChange={e => this.handleChange(e, i)} className="form-control" style={{height: '46px;'}}>
<option key="1" value="1">Red</option>
<option key="2" value="2">Yellow</option>
<option key="3" value="3">Green</option>
</select>
and in your handleChange, you would change a value in state that would correspond to the product from your state.
You can use a ref to get form values from the DOM.
Here you need one ref per product, so you could use the index of product to save the ref and also to submit de form.
class Example extends Component {
constructor(props) {
super(props);
this.state = {
products: [],
};
this.selectByProduct = {};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event, productIndex) {
event.preventDefault();
const size = this.selectByProduct[productIndex].value;
console.log(`you submitted the size ${size} of product ${productIndex}`)
}
render() {
return this.state.products.map((product, i) => (
<form onSubmit={event => this.handleSubmit(event, i)}>
<select ref={select => this.selectByProduct[i] = select} name="size" className="form-control" style={{height: '46px;'}}>
<option key="1" value="1">Red</option>
<option key="2" value="2">Yellow</option>
<option key="3" value="3">Green</option>
</select>
<input type="submit" value="Pick This" className="form-control" />
</form>
));
}
}
below is my code. console.log of this.Resources result is shown below
1:"Basavaraj"
2:"Ashuthosh"
3:"Sravan"
4:"Raghavendra"
5:"Prem kumar"
6:"Simran"
7:"Namratha"
8:"Ghanashri"
9:"Ravindra"
10:"Anand"
11:"Shaeen"
render() {
console.log(this.Resources);
const options = this.Resources.map((item, index) =>{
<option key={index} value={item}>{item}</option>
});
return (
<div>
<form>
<div id="select">
<div className="container select">
<div className="row">
<select className="col-4 selectpicker input-large">
<option value="" disabled selected>Select resouce</option>
{options}
</select>
I want all data in this.Resources should come in select drop down options.
Thanks in advance
You are not returning the html in map.Need to return it.
const options = this
.Resources
.map((item, index) => {
return (
<option key={index} value={item}>{item}</option>
);
});
OR
ECMA6 arrow notation with default return:
const options = this
.Resources
.map((item, index) => (
<option key={index} value={item}>{item}</option>
));