I have this code
{categories.map((category, index) => {
return(
<option value={category._id} key={index}>{category.name}</option>
)
})}
This code display all categories. And I have const product
How to make if product.category == category._id add attribute selected to select( in map function )
You can use selected={product.category == category._id} but it's not recommended, you should use the value attribute in the select tag. Reference
Try this, this should resolve your issue. I have applied the condition as per your requirement inside the map function.
{categories.map((category, index) => {
return(
product.category == category._id ? <option value={category._id} key={index} selected>{category.name}</option>: <option value={category._id} key={index}>{category.name}</option>
)
})}
Related
I'm using a searchable select component from antd and I need to detect if the search was unsuccessful (I need to add a UI button in that case). But, I can't seem to find any props for it in antd docs.
I've tried this:
<Select dropdownAlign={{ offset: [-15, 4] }}
showSearch
placeholder="Select a medicine"
suffixIcon={
// <HiOutlineArrowDown color="#29BCC1" />
<img src={arrowdropdown} alt />
}
onChange={(e) => handleChange(e, "select", "medicine")}
onSelect={(e) => setMed(e)}
filterOption={(input, option) => {
if(!(option?.children?.toLowerCase()?.startsWith(input?.toLowerCase()))) {
console.log("no result")
}
return option?.children?.toLowerCase()?.startsWith(input?.toLowerCase())
}}
value={med}
className="c_select"
>
{props.medicine.data?.map((med, index) => (
<Option value={med.id} key={index}>
{med.name}
</Option>
))}
</Select>
This is working, but the problem is that console.log("no result") logs about a 1000 times which is very inefficient. So, please guide me if there's a much better way to solve this issue. Thanks.
P.S: I'm using antd: 4.21.3 with react: 18.2.0.
Ok, so I added an onSearch prop to my Select component and passed in handleMedicineSearch function to it. The function is below:
function handleMedicineSearch(value) {
const filteredOptions = props.medicine.data?.filter((item) => {
return item?.name?.toLowerCase()?.startsWith(value?.toLowerCase());
})
if(filteredOptions.length === 0) {
setShowAddBtn(true);
}
else {
setShowAddBtn(false);
}
}
The line:
if(filteredOptions.length === 0)
is used to detect if the search was unsuccessful.
I am having issues correcting mysyntax in a React project. I get the error "Warning: Use the defaultValue or value props on instead of setting selected on ." However, I am unable currently to dynamically update the selected option for the drop down menu using just value/default value. The code updates 'correctly' when selected is used.
Relevant code below:
const Client = ({..., reactions}) => {
...
List Generator
function ReactionList() {
// retrieve and filter reactions
const availableReactions = reactions.filter(...)
return (
availableReactions.map((reaction, index) =>
<option key={index} value={reaction._id} selected={chosenReaction.name === reaction.name}>
{reaction.name}
</option>
)
)
}
// selecting reaction from drop down
function SelectReactionOption(entry){
setSelectedReactionId(entry);
setReactionPsiUpcast(0);
}
return (
...
<div className="DropDown">
<div>
<p>
Actions:
</p>
<select type="number" name={chosenAction.name} onChange={e => SelectActionOption(e.target.value) }>
<ActionList/>
</select>
</div>
</div>
I have react functional component - Shop. I add in return section drop down list using select and options.My problem is about if statement. I don't know what should I type in If (). Now if I select option with id 'a' or option with id 'b' the results is the same and I don't know why. It doesn't see that I change selection in drop down list and always returns filters relate to first If() statement with id'a'. Even if I choose option in my drop down list with id'b' it always use returt statement relate to if with id'a'. I think that this only check if in drop down list there is a possibility to select option with such Id but I would like to check if it is actually selected an if yes return something. Thank you in advance for help.
Please see part of code below.
const Shop: React.FC<ShopProps> = (props: ShopProps) => {
const [selectedOption, setSelectedOption] = React.useState(props.selectedShop.address);
const filterShopBy = (item: any, event: any) => {
if (onChange=()=>setSelectedOption(document.getElementById('a'))){
return 'some code1 which I use to filter data';
}
else if (onChange=()=>setSelectedOption(document.getElementById('b'))){
return 'some code2 which I use to filter data'; }
}
return (
<div className="filters">
<select id='list' className='droplist' value={selectedOption} onChange={(e:React.ChangeEvent<HTMLSelectElement>) => setSelectedOption(e.target.value)} >
<option id='a' value={props.selectedShop.address} onClick={() => setSelectedOption(props.selectedShop.address)}>Shop address</option>
<option id='b' value={props.selectedShop.name} onClick={() => setSelectedOption(props.selectedShop.name)}>Shop name</option>
</select>
);
}
There are some issues here. I think main the problem resides in your if evaluation. Cuz it will always enter the first if and return. My advice is to only use the state and evaluate the state! And avoid those ids because you have simpler ways to solve the problem. Let me know if this following code helps you out:
const Shop = props => {
const [selectedOption, setSelectedOption] = React.useState("B");
// In my opinion it's way simpler to work with state
if (selectedOption === "A") {
//Do something here
} else if (selectedOption === "B") {
//Do something here
}
return (
<div className="filters">
<select
value={selectedOption}
onChange={evt => setSelectedOption(evt.target.value)} // You just need one "onChange"
>
<option value="A" id={1}>
A
</option>
<option value="B" id={2}>
B
</option>
</select>
</div>
);
};
export default Shop;
I am looping through an array of objects that return option inside a select tag. As far as I know, I can't attach event handler on the option tag, so I attached onChange handler on select tag. I can get the value of option tag by default, but as I am looping array of objects, I want to get some other values of the object as well. How do I achieve that?.
Here's the snippet of what I am doing,
<select onChange={handleChange}>
{data.map(item => {
return (
<option key={item.id} value={item.name}>
{item.name}
</option>
);
})}
</select>
How do I get for example item.age and item.address when onChange get invoked ?
I find the solution, I set the value of option tag as an object, stringify it using JSON.stringify() so I can get the whole object, and then just read it with JSON.parse()
<select onChange={handleChange}>
{data.map(item => {
return (
<option key={item.id} value={JSON.stringify(item)}>
{item.name}
</option>
);
})}
</select>
I have the following functional component. It basically maps over an array of objects, and returns a datalist full of options:
const Suggestions = (props) => {
if(props.suggestions){
let data = props.suggestions.map(r => (
<React.Fragment>
{r.bar ? <option key={r.index} value={r.bar.toUpperCase()/> : null}
{r.shop ? <option key={r.index} value={r.shop.toUpperCase()/> : null}
</React.Fragment>
));
return <datalist id="places">{data}</datalist>
}
return null
}
I still get the following warning on the console:
Warning: Each child in a list should have a unique "key" prop.
Check the render method of `Suggestions`.
What am I doing wrong?
The key prop should go on the root element being rendered in a loop. In your case, it's the React.Fragment. Also, ensure the key is unique among all siblings in a loop:
let data = props.suggestions.map((r, index) => (
<React.Fragment key={index}>
{r.bar ? <option value={r.bar.toUpperCase()/> : null}
{r.shop ? <option value={r.shop.toUpperCase()/> : null}
</React.Fragment>
));