I got below code , every option will display a certain content in the same page , assuming im getting the content from an Array of objects how i will perform this using useState hook.
<FormControl className={classes.formControl}>
<InputLabel htmlFor="branch">Branch Name</InputLabel>
<Select
native
value={state.location}
onChange={handleChange}
inputProps={{
name: "location",
id: "branch",
}}
>
<option aria-label="None" value="" />
<option value={10}>North</option>
<option value={20}>East</option>
<option value={30}>West</option>
</Select>
</FormControl>
Store the selected value in a state and render conditionally based on the value of that state :
const [value, setValue] = useState(10)
return (
<>
<select value={value} onChange={(event) => setValue(event.target.value)}>
<option value={10}>North</option>
<option value={20}>East</option>
<option value={30}>West</option>
</select>
{value === 10 && <SomeComponent/>}
{value === 20 && <SomeOtherComponent/>}
{value === 30 && <SomeAnotherComponent />}
</>
)
Related
<select open={false} autoFocus={true} onClick={this.handleClick} size={5}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
I have made a dropdown, but I cannot close it. I do not want close it with display:none
You can initially show 5 items and, after selecting close it(set to 1 using a state)
import React, { useState } from "react";
function App() {
const [defaultSize, setDefaultSize] = useState(5);
const handleClick = () => {
setDefaultSize(1);
// do other stuff
}
return (
<div>
<select open={false} autoFocus={true} onClick={handleClick} size={defaultSize}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</div>
);
}
export default App;
Remove the size attribute. change onClick to onChange add value attribute for select tag
<select value={myCar} onChange={handleChange}>
I am using Formik for a bunch of admin console forms that I have in my application. So far I did not have this use case.
My Formik forms use one of 2 custom components, either a Myinputtext(input box) or a MySelect(drop down). I dont have a need for any other components so far. Here is how my Myselect component looks like.
const MySelect = ({ label, ...props }) => {
const [field, meta] = useField(props);
return (
<div>
<label htmlFor={props.id || props.name}>{label}</label>
<select className={props.className} {...field} {...props} />
{meta.touched && meta.error ? (
<div className="error">{meta.error}</div>
) : null}
</div>
);
};
Over in the form I am passing values to this component like this
<MySelect className="select-input" label="Losing Player" name="losingPlayer">
<option value="">Select Losing Player</option>
<option value="player1">{state.Player1Name} </option>
<option value="player2">{state.Player2Name} </option>
All of this works for a few forms I have built so far. In the fourth form now, data coming back from the back end is coming as an array and I am trying to pass the array as input to the myselect component
<MySelect className="select-input" label="Losing Player" name="losingPlayer">
<option value="">Select Losing Player</option>
<option value="player1">{name of array object} </option>
This is failing and not providing the right result.
In the formik official docs it says there is a way to handle array objects like this
<Form>
<Field name="friends[0]" />
<Field name="friends[1]" />
<button type="submit">Submit</button>
</Form>
</Formik>
But my array size can be dynamic and I cannot hardcode, 0,1 like above.
I tried rendering the array inside the select component like this,
<MySelect className="select-input" label="Winning Player" name="winningPlayer">
{props.initialValues.map((player) => {
<option key={player} value={player}> {player} </option> })} </MySelect>
this does not throw any errors. but the drop down is displayed empty.
I am basically hoping to have the names in the array displayed as the dropdown. What is the right solution to tackle this?
This finally worked:-
return (
<div>
<label htmlFor={props.id || props.name}>{label}</label>
{!props.player ? <select className={props.className} {...field} {...props} />
:
<select className={props.className}>
{props.player.map((player) => {
return (
<option key={player} value={player}>
{player}
</option>
)
})}
</select>
}
{meta.touched && meta.error ? (
<div className="error">{meta.error}</div>
) : null}
</div>
You need to map your array and render options inside your select like this:
{options?.map(({ value }) => (
<option key={value} value={value}>
{value}
</option>
))}
I have a Dialog where the user is able to create a new Tour. I want to add a Select option to choose the amount of Tours being created. Currently the component is not rerendering onChange and the amount is not being saved. I would really appreciate help :)
My Code looks like this :
const [selectedOption, setSelectedOption] = useState({amount:''});
const handleSelectChange = (event) => {
const amount = event.target.amount;
setSelectedOption({
...selectedOption,
[amount]: event.target.value,
});
};
<FormControl className={classes.formControl}>
<InputLabel
htmlFor="text-simple"
required
>{t('Anzahl Touren')}</InputLabel>
<Select
native
value={selectedOption.amount}
onChange={handleSelectChange}
inputProps={{
amount: 'amount'
}}
>
<option value={1}>1</option>
<option value={2}>2</option>
<option value={3}>3</option>
<option value={4}>4</option>
</Select>
</FormControl>
EDIT:
Getting error: Every child in a list should have a unique key prop.
const numberList = ['1','2','3','4','5']
<FormControl className={classes.formControl}>
<InputLabel
htmlFor="text-simple"
required
>{t('Anzahl Touren')}</InputLabel>
<Select
name="amount"
input={<Input id="text-simple"/>}
required
native
value={selectedOption.amount}
onChange={handleSelectChange}
>
{numberList.map((amount,index) => {
return(
<option
key={index}
value={amount}>
{amount}
</option>
)
})}
</Select>
</FormControl>
Try this approach,
Set a name field for select. And update the state based on the name field.
like below,
<Select
name="amount" <--- Add this change
native
value={selectedOption.amount}
onChange={handleSelectChange}
inputProps={{
amount: "amount"
}}
>
handleSelectChange method:-
const amount = event.target.name;
Complete Code:-
import { FormControl, InputLabel, Select } from "#material-ui/core";
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [selectedOption, setSelectedOption] = useState({ amount: "" });
const handleSelectChange = (event) => {
console.log(event.target.name, event.target.value);
const amount = event.target.name;
setSelectedOption({
...selectedOption,
[amount]: event.target.value
});
};
return (
<>
<FormControl>
<InputLabel htmlFor="text-simple" required>
Anzahl Touren
</InputLabel>
<Select
name="amount"
native
value={selectedOption.amount}
onChange={handleSelectChange}
inputProps={{
amount: "amount"
}}
>
<option value={1}>1</option>
<option value={2}>2</option>
<option value={3}>3</option>
<option value={4}>4</option>
</Select>
</FormControl>
Selected Amount - {selectedOption.amount}
</>
);
}
Working code - https://codesandbox.io/s/proud-wave-4dz0u?file=/src/App.js:0-1080
I am new to React and am currently using AntD in my ReactJS code. In my code, I have a select option that is supposed to change the form elements depending on what kind of form it is.
Here is my select:
<Form.Item label="Inquiry Type">
<Select>
<Option>
form 1
</Option>
<Option>
form 2
</Option>
<Option>
form 3
</Option>
</Select>
</Form.Item>
So what should happen is that when I choose Form 1, it should be able to show me all the contents of Form 1, and the same thing for Forms 2 and 3.
I am unsure about how to do this. I have read other questions but they do not answer mine.
Check this.
state = {
selectedForm: "form1"
};
changeForm = value => {
this.setState({
selectedForm: value
});
};
render() {
const { selectedForm } = this.state;
return (
<div>
<Select value={selectedForm} onChange={value => this.changeForm(value)}>
<Option value="form1">form 1</Option>
<Option value="form2">form 2</Option>
<Option value="form3">form 3</Option>
</Select>
{selectedForm === "form1" ? (
<Form1 />
) : selectedForm === "form2" ? (
<Form2 />
) : selectedForm === "form3" ? (
<Form3 />
) : ""}
</div>
);
}
I'm using ant.design select component ("tags" or "multiple" mode) in a page, i want dropdown to be automatically closes after each selection. Now it remains open and i should click on other places in the page to close the dropdown list.
import { Select } from 'antd';
const { Option } = Select;
function handleChange(value) {
console.log(`selected ${value}`);
}
ReactDOM.render(
<Select mode="multiple" placeholder="Select Countries" size="large" onChange={handleChange}>
<Option value="country1">Country1</Option>
<Option value="country2">Country2</Option>
<Option value="country3">Country3</Option>
<Option value="country4">Country4</Option>
<Option value="country5">Country5</Option>
<Option value="country6">Country6</Option>
</Select>,
mountNode,
);
Simply change first "Select" component to this:
<Select
mode="multiple"
placeholder="Select Countries"
size="large"
ref={(select) => this.countrySelect = select}
onChange={()=>{
this.countrySelect.blur()
}}>
<Option value="country1">Country1</Option>
<Option value="country2">Country2</Option>
<Option value="country3">Country3</Option>
<Option value="country4">Country4</Option>
<Option value="country5">Country5</Option>
<Option value="country6">Country6</Option>
</Select>
From the docs:
import { Select } from 'antd';
const Option = Select.Option;
function handleChange( value ) {
console.log( `selected ${value}` );
}
<Select defaultValue="lucy" style={ { width: 120 } } onChange={ handleChange }>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
<Select defaultValue="lucy" style={ { width: 120 } } disabled>
<Option value="lucy">Lucy</Option>
</Select>
<Select defaultValue="lucy" style={ { width: 120 } } loading>
<Option value="lucy">Lucy</Option>
</Select>
Use it's own <Option>
More info: https://ant.design/components/select/
import React, { useState } from 'react'
import { Select } from 'antd'
const Option = Select.Option
const SelectComponent = () => {
const [open, setOpen] = useState('')
const handleChange = value => {
console.log(`selected ${value}`)
}
return (
<Select
showSearch
mode={'multiple'}
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
open={open}
onChange={value => {
handleChange.bind(this, value)
this.setState({ open: false })
}}
onFocus={() => setOpen(true)}
onBlur={() => setOpen(false)}
onSearch={() => setOpen(true)}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select>
)
}
export default SelectComponent