I am creating a shopping page. I am keeping a JSON to store the product details. I have created the product as a component and using it in the shopping page. For each product I am keeping a drop down to select the quantity (0-5, default value is 0).
Whenever a drop down value change happens, I am making a call back to the parent which is the product page where I am updating the total count. I am using useState hook to update the total. The issue is that when I call the setState, the drop down is not showing the selected value, but the default one (My strong guess is that the drop downs are getting reset. When I remove the setState call, the drop downs work fine).
I am using react-dropdown for implementing drop down.
Parent Component:
const [total,setCartTotal] = useState(0)
const calculateTotalCartValue = (count) => {
setCartTotal(total+count)
}
// Adding the child Component
<Cartitem
parentCallback={calculateTotalCartValue}
/>
Child Component:
const calculateTotal = (event) => {
console.log(event) // This is properly printing the selected drop down details
parentCallback(2) // for testing I am passing value 2
}
// Drop down
<Dropdown
options={options} // I have a list of options
value={defaultOption}
onChange={calculateTotal}
/>
Related
I use ReactSelect (https://react-select.com/props) to render select boxes. In my specific case, each item rendered in the list of the react select is a "complex" component with CSS and HTML elements:
const User = ({ user }) => {
return (
<div className="xxxx">
<b>{user.name}</b>
// ...
</div>
);
};
When I click on the react select to start searching, it displays all my records (2000). It's super slow. Is there a way to limit the number of displayed items to let's say 100?
Side note: the data is frontside so I don't need to call an API.
I am new to Vue JS and I have below requirement
Requirement :
I have dropdown with below values
On selection of each value, I want to add dropdown component on page, which are already defined.
For example:
On Selection of 'Closed', dropdown component (which is searchable dropdown)will be added
On Selection of 'Reviewed', another dropdown component where user can select values from dropdown. (not searchable one). Likewise..
What I have :
I already have all the different types of dropdowns as a component.
What I tried :
I have loaded all the four types of dropdown on page load, and I am hiding and showing them based on dropdown value selection.
Example: I am showing only searchable dropdown component when user select 'Closed' option and hiding other components. I am showing selectable dropdown component when user select 'Reviewed' option and hiding other components.
Problem :
Now the requirement is, user can select any option N number of times and on each selection, respective dropdown component should get added.
This screen also have edit functionality.
Note :
Consider this as a filter functionality with below screen
Any help / pointers would be appreciated. Thanks in advance.
First you should create Closed and Reviewed components
Then, you should have a array of filters:
data() { return {
filters: [],
} }
When Add filter is clicked you should push corresponding component to filters, something like:
methods: {
addFilter() {
const component = Created /* */;
this.filters.push({
value: null,
component: component
})
}
}
And finally render them in template this way:
<div v-for="(filter, index) in filters" :key="index">
<component :is="filter.component" />
</div>
Demo
For And/Or dropdowns, you can use some hacks but I'm not sure how to implement them (you can check if index is zero to only display them between filters)
I'm using DownshiftJS to create an Autocomplete component using the useCombobox hook. It's all going well and testing with react-hook-form. Unfortunately, I've hit a problem where the reset function available within react-hook-form, which fires the HTMLFormElement.reset() method, does not trigger any state/input change within the Downshift component.
This means that when a user selects an item from the list (which triggers an event in the Autocomplete), clicks the reset button and then clicks the input again, the list is filtered to just the previously selected item. This is because the selected item is stored within a selectedItem internal state.
How can I get the reset method to trigger a change within Autocomplete component and clear the selectedItem state?
I've isolated the issue here.
You can use React.useEffect to detect if the user hits the reset button and reset the selected items accordingly in your Autocomplete component
const [inputItems, setInputItems] = useState(options);
const {
inputValue,
...
} = useCombobox({
items: inputItems,
...
});
React.useEffect(() => {
if (!inputValue) {
// user resets value. Reset selected option
setInputItems(options);
}
}, [inputValue, options, setInputItems]);
Live Demo
Am trying to pass selected row value from one component to another on the button click. but in this, example, from where can get selected row values and pass the selected value on button click? followed by that routing will happen
this.selection.selected returns the same object multiple time. how to stop that.
i want to pass the value like
<button (click)='onSelect(row)'>select row </button>
onSelect(id){
this.selectedRowValue = id
//some logics
}
could someone tell me how to pass the selected row value from one component to another?
If you add this code in your component, selectedElements object changes with every selection change event
selectedElements: PeriodicElement[] = [];
constructor(){
this.selection.changed.asObservable().subscribe(a => this.selectedElements = [...this.selection.selected]);
}
I have a dropdown that get it's option from a fetch, and when I select and option another fetch is requested to save that into the DB, and then it return that into the state so the selected value is now in the state.
BUT!
my dropdown doesn't update the selected value, even though it updates correctly in the DB.
the dropdown:
<Form.Field className="dropdown">
<label>{answer.answerText}</label>
<Dropdown
key={ answer.name }
value={answer.value <!--THIS IS UPDATED AFTER SELECTION, BUT DOESN'T SHOW -->}
style={{paddingLeft: pad}}
onChange={(e) => this.blurHandler(e.target.textContent,answer)}
name={ answer.name }
disabled={answer.settings.disabled}
options={answer.dropdownOptions}
/>
</Form.Field>
The method that gets called.
blurHandler(e,answer) {
var answerValue = e;
var projectId = this.props.projectId;
this.props.updateAnswer('/api/update-answer',
answer.questionId,
projectId,
answer._id,
answerValue,
answer.settings.answerType
);
}
what updateAnswer does is just a fetch to save the value to the projects answer in the DB.
Your question title says defaultValue but you do not use that prop anywhere in your Dropdown component. When you are defining a value in your Dropdown component, or on any SUIR component, that means you must control all other input interactions yourself and you lose any of the out of the box state controls that come with SUIR components. There are definitely cases where you might want this.
I'd recommend changing your value prop to a defaultValue prop on your Dropdown and that should give you what you're expecting. The Dropdown will only initialize itself with that value but it will change in the UI the way you are expecting.