I have created a React component which opens a form for input parameters and once the form is submitted, a call is made to server and the resulting json is displayed in the UI. This component takes input parameters from dropdown, text box and so on.
So I created a generic component as there are many such instances. I passed the required input through props and displayed the values in the component dynamically.
When I called the second component's instance passing the values, I see that opening the dropdown in the first instance, opens the dropdown from second instance.
Please suggest an approach to make each component's instance unique.
Thanks in advance!
Related
I am using a button to display a modal for a particular profile (different buttons for different profiles). By using a hook, the modal just renders the last profile's info. (I am mapping the profile info list)
Is there a way I can call the modal component in the mapping itself without using Hook? Or any different approach to this problem?
(P.S the code is too long, hence not pasting it in the question description)
I wired up parent and modal using another component in between, and it worked.
I created a component receiving props(containing profile info) from parent and passing it to the modal. And the modal is called from the parent via this new component.
When the user starts to typing something in the v-combobox component, an axios request is sending to search users in the database. The content of the list is updating dynamically. The problem is that when items in the combobox has been updated, it automatically selects the word previously typed by the user and updates v-model (and in my case, it creates a chip on the frontend). How to prevent automatic select when updating items?
You may want to use a v-autocomplete component to get the behaviour you're expecting. You can think of combobox as a select so any input is a change/selection and autocomplete as a text field where input filters the dropdown options.
I solved the problem as follows.
Changed the v-combobox component to v-autocomplete. Made a form for adding a new user. Since v-autocomplete does not allow displaying items outside of the list, I disabled the display of v-model contents using a slot and made a custom display of v-model items using v-chip component with deletion.
I have used the following component in react,
https://www.npmjs.com/package/react-multiselect-checkboxes
I want to clear selected checkboxes because I have to recreate it with new options from another dropdown change event.
So is there any way from where I can clear selected checkboxes from parent component when another dropdown is changed
This is for react
The author of the libarary suggest that its behavior is based on react-select
Have you tried to use value prop?
see https://github.com/JedWatson/react-select#controllable-props
Additionally if you want to manipulate values in parent component you should use onChange callback then and store it somewhere (I assume state will be best place)
We've been using redux-form and seeing a noticeable lag when user types in an input field. I'm not really sure if it's a problem with redux-form. This could probably be the way we've structured our components. So we have page which lists some data, say 25 rows and filters for it. On click of a button, we open a modal where we render a redux-form. Now if user types in any of the input field, all the list items in the underlying page also get re-rendered. We're using React.Component for list items. React devtool's "Highlight updates" option highlights list items but when I do a console.log in list item's render method, it's not printing!
Wonder if this is happening because the list item's parent component is also a (redux) connected component and when redux-form's Field updates the store, this also gets re-rendered? How do you use redux-form in such scenario? I don't think having multiple stores is a recommended way.
I'm guessing you have an event listener for when any of the inputs on the form changes, and then you do some fetching/filtering on the underlying list?
Running this when typing quickly could lead to a performance hit, depending on what your event listener does. You could try using something like lodash.debounce to only run your listener after the user has stopped typing for like 200ms?
I am working with material-ui and React. I have a SelectField that is part of a component which is a grandchild of the parent component. What I need is to take the value of the item in the SelectField and then use that to display information in another SelectField which is a child of this component so a great grandchild of the parent component if you will.
I need to use the value I get from the first SelectField to make an API request to get the info that I need to show in the next SelectField.
I can successfully get the value from the first SelectField but I am struggling to figure how I can get it to show in the child component.
If you could help me out I would appreciate it.
Thanks for your time
Put the value of your two fields in a state and fill your select fields with thoses values. Create a callback that will call this.setState() to modify the value of the second field when the first one is modified. Attach this callback on yout first field with the property onChange. As a result, the second select field will have a new value. you have an example here
To fix this, I created an array and when I select the value from the first SelectField I updated the state of the array with the values that I wanted to populate the next SelectField with and passed it back from the parent component as props.