I am building a dropdown menu in React using a select dropdown.
or some reason, my selected value is not passing, it is passing the entire array instead of the value I selected on the dropdown.
What am I doing wrong here and how can I pass the value that I selected via dropdown?
Dropdown Code in React
<select
className='add-cap-select'
onChange={(value) => handleChangeForm('agent', value)}
>
{agents.map((agent) => (
<option id='agent' key={agent} value={form.agent}>
{agent}
</option>
))}
</select>
/**
* Handles when the user changes any regular form entry
* #param {String} prop
* #param {String} value
*/
const handleChangeForm = (prop, value) => {
setForm({
...form,
[prop]: value
})
}
Here is my simple solution to do this
import React, {useState} from 'react';
export function App(props) {
const [agent, setAgent] = useState({
agent:'',
});
const handleChangeForm = event =>{
console.log(event.target.name, event.target.value)
setAgent({...agent,[event.target.name]:event.target.value})
}
return (
<select
className='add-cap-select'
name="agent"
onChange={(event) => handleChangeForm(event)}
>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
);
}
you are passing agent and value both in handleFormChange, instead of this you can put the name in select, and from the event, you can get the name as well as value, here you are directly passing value which is event actually if you want to do in your solution then you can do like this -> value.target.value
Related
const startDateRef = useRef();
const dateFilter = (event) => {
startDateRef.current.value = "";
}
<Form.Group controlId="dob" ref={startDateRef}>
<Form.Label>Start Date</Form.Label>
<Form.Control
ref={startDateRef}
type="date"
name="stDate"
value={dateBetweenState.stDate}
placeholder="Date of Birth"
onChange={(e) => {
handleChange(e);
}}
/>
<select
type="text"
className="form-select"
name="stDate"
onChange={(e) => {
dateFilter(e.target.value);
}}
>
<option value={0}>Choose...</option>
<option value={7}>7 Days</option>
<option value={14}>14 Days</option>
<option value={30}>30 Days</option>
</select>
...
This is my code segment. I just typed here relevant code only. actual code too long . Anyway here have date-picker and select-box . If picked date and then select item from selection box. I need to clear early picked data from data-picker . I just tried it from react ref . I did that from when select item onChange function work and it contains the ref assigns the value to clear. but it does not work.
did you try adding the value parameter in the tag?
or
are you trying to say this,
you are trying to clear the value of the date picker, in terms of actual data in the useRef is updated but this is not being reflected on the UI?
if so then there is a simple trick that I use for updating the UI forcefully
try these method if it works:
remounting using useState and refreshing logic
const [refreshing, setRefreshing] = useState(false);
useEffect(() => {
if(!!refreshing) {
setRefreshing(false);
}
}, [refreshing])
// this will update the state to refreshing as true and the above useEffect will immediately update the state to false
const refresh = () => {
setRefreshing(true)
}
...
{!refreshing && <select
...
onChange={(e) => {
dateFilter(e.target.value);
}}
>
...
</select>}
I have a select component, which calls a callback given by a parent component to change a state maintained by the parent. This callback is called when an option is selected in the component. This select component disappears (rendering null instead of the component) after some scrolling interaction. The problem is, when the select component is allowed to reappear, it defaults to its first option, instead of the state from the parent.
I have already passed the state down to the component. I'm stuck with using the state to make an option tag of the component be selected by default once it reappears.
Here is the select component:
export default function Child({onStateChange, parentState}) {
return (
<div
...
onChange={(e) => props.onStateChange(selectEventToString(e))}
>
<select>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
...
);
}
Here is the parent component:
export default function Parent() {
const [maintainedState, setMaintainedState] = useState("initial state");
function handleStateChange(newValue) {
setMaintainedState(newValue);
}
return (
<div className="one-town">
<Child parentState={maintainedState} onStateChange={handleStateChange} />
</div>
);
}
`
``
Try this, put your stat in value to be selected and on change select change state
const Child = ({ onStateChange, parentState }) => {
return (
<div>
<select value={parentState} onChange={e => onStateChange(e.target.value)}>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
);
};
const Parent = () => {
const [maintainedState, setMaintainedState] = useState('b');
function handleStateChange(newValue) {
setMaintainedState(newValue);
}
return (
<div className="one-town">
<Child parentState={maintainedState} onStateChange={handleStateChange} />
</div>
);
};
My parent component looks like:
<div>
<Dropdown items={companiesData} handler={handleClick} />
....//More stuff
</div>
companiesData is an array of items with id, companyName etc.
I am creating my dropdown this way:
const Dropwdown = ({ items, handler }) => {
return (
<select onChange={handler}>
{items.map(({ id, value, companyName, companyType }) => (
<option
key={id}
value={value}
>
{`${companyName}, ${companyType} `}
</option>
))}
</select>
)
}
I know that from the handleClick function I can access e.target.value and get the value of the dropdown, but what if I want to get the whole object of that selected value (e.g. containing id, value, companyName etc.)and pass it back to the parent component?
in Dropdown, add value property to select and use the id like value={this.state.selectedValue}.
So you will have that value in ev.target.value.
Then, in your parent, you can do something like: companiesData.filter(company => company.id === ev.target.value). And you have the info there.
and of course set the selectedValue (using hooks or normal setState)
Another option (if you don't want to do filtering) is to simply send e.target to your handler instead of e.target.value.
In your handler, retrieve the info you need like this:
const parentHandler = target => {
const targetOptions = target.options;
const selectedValue = target.value;
console.log("selected value", selectedValue);
console.log("all html options array", targetOptions);
console.log("selected option html", targetOptions[target.selectedIndex]);
console.log(
"selected option name",
targetOptions[target.selectedIndex].getAttribute("name")
);
};
see a demo here
I have a react app that I am currently updating which involves switching to react 16.8 and updating all libraries. I have two drop down selects from material UI, and due to this new version the multi select one no longer allows multiple options to be selected and I can't work out why. Any ideas would be appreciated!
Code:
import React from 'react';
import MenuItem from '#material-ui/core/MenuItem';
import FormControl from '#material-ui/core/FormControl';
import Select from '#material-ui/core/Select';
const names = [
'Oliver Hansen',
'Van Henry',
'Kelly Snyder',
];
export default function MultipleSelect() {
const [personName, setPersonName] = React.useState([]);
const handleChange = event => {
console.log(event) //holds the selected option correctly
setPersonName(event.target.value);
console.log(personName)
};
return (
<div>
<FormControl className={classname}>
<Select
multiple //used to be isMulti but this also no longer works
value={personName}
onChange={handleChange}
placeholder = {"choose a name"}
options={names}
>
</Select>
</FormControl>
</div>
);
}
This is because your value always contains a single string value. When you select a second items, it overrides the first value with new one. You need to assign an array of values to value prop with selected values. Push selected item in previously selected values array and update the state and on removal, remove that name from that array.
export default function MultipleSelect() {
const [selectedNames, setSelectedNames] = React.useState([]);
const handleChange = event => {
console.log(event) //holds the selected option correctly
// if selection/addition
setSelectedNames([...selectedNames, event.target.value]);
// On removal,
// setSelectedNames(selectedNames.filter(name => name !== event.target.value));
};
return (
<div>
<FormControl className={classname}>
<Select
multiple //used to be isMulti but this also no longer works
value={selectedNames}
onChange={handleChange}
placeholder = {"choose a name"}
options={names}
>
</Select>
</FormControl>
</div>
);
}
Set true value to multiple attribute:
<Select
multiple="true"
// ...
>
// ...
</Select>
Your options are currently single string. Select expects something like this (notice the value and label properties):
[
{value: 1, label: "Oliver Hansen"},
{value: 2, label: "Van Henry"},
{value: 3, label: "Kelly Snyder"}
]
If you have that in order your select should be working as expected.
Following is the Select in my withFormik Form. Which is working fine.
<Select
id="userList"
name="userList"
value={userList.names}
initialValue={values.userList}
className="select-box"
onChange={setFieldValue}
/>
But now on the basis of value selected I need to add/remove class from the select. so I tried e but it is returning the field name only
<Select
id="userList"
name="userList"
value={userList.names}
initialValue={values.userList}
className="select-box"
onChange={e => {
console.log(e) // => userList
}}
/>
I even tried this but no luck
<Select
id="userList"
name="userList"
value={userList.names}
initialValue={values.userList}
className="select-box"
onChange={(field, value) => {
console.log(field) // Response => userList
setFieldValue(field, value)
}}
/>
How can I access the event in onchange as on the basis of value I need to add / remove class from the select. Something like -
handleChange = e => {
// Here e is refering to the Select
if (e.target.value) {
e.target.classList.remove("gray");
e.target.classList.add("black");
} else {
e.target.classList.remove("black");
e.target.classList.add("gray");
}
};
<Select /> as a controlled component would require the value prop to use the state's selected value.
value prop is not meant for the <option> values.
Thus, you can have something like:
state = {
selected: '',
}
handleChange = e => {
const selected = e.target.value; // selected name
switch(selected) {
// change class
}
this.setState({
selected
});
}
<Select value={this.state.selected} onChange={handleChange}>
{userList.names.map(user =>
<options value={user.name}>{user.name}</option>
)}
</Select>