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.
Related
This might simple but I need some pointers.
I have a list of items which I am rendering using map list (Parent Component) and item(Child Component).
There is checkbox inside child component
Parent has a button
Now, I want user should able to select few or all items from the list, and on click of button we should highlight the checked items alone.
I tried some flag passing, however could not figure out best approach.
Please suggest.
Thanks all.
Finally, figured out by adding operation code in parent component.
Child component just get status update in case.
I have a component that displays a table using AgGrid, and the data that is displayed comes from a Redux selector.
I want to render a cell in the table that has a button, which will then perform an action based on the row data.
The primary issue I have, is that when I pass a callback function to the button in the cell renderer, the row data is not populated when it gets called in the parent component. I believe that I need to pass the proper context to the cell renderer so that when it calls the function from the parent component, all of the data is present. However, please correct me if this is incorrect. However, I'm not sure how to properly pass the context given that all of this is happening from a functional component.
Example:
https://codesandbox.io/s/aggrid-redux-context-y49fd
Click on the "Set Row Data" button, which will make the button in the rows appear. Clicking the button will then print out the row data, which will be empty.
I need a way to be able to access the row data from the cell renderer.
Dirty solution
Try to bind this to onExecute when you are setting it to the cell render params:
cellRendererParams: { onExecute: onExecute.bind(this) }
Do you need to access data of all rows, or only single row that the current cell render is rendering? If you need data of the current row only, the AgGrid has already it in props, you can acces it in this.props.data in your cell renderer component.
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)
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!
I'm using Semantic-React and I have component-filter which consists of checkbox groups. Every checkbox has id and I must pass them in order to filter the results.First idea was to perform method which would be called after checkbox onCLick(which would pass checkbox id). And in this method set in state an object and after every checkbox click change it. I remember, that in Jquery exists $('form').serialize() which everytime checks form elements and gets checked values automaticaly. Exists something like this in react, or semantic-ui react? I would be simplier to use such method than to create and control object in state
You should use "controlled components":
Filter component should keep a set of checked ids as part of state.
Checkbox checked property should be set to true if the set contains box id (and to false otherwise) in Filter component render.
Checkbox onChange should be handled by filter component and modify state.
Filter can access it's state handling checkbox onChange or button "Apply" onClick (or any other event handled by Filter component).
Be careful: setState is an async function and directly reading other component state can lead to data race, so state must be read after proper event fired by React. Also there are a bunch of state-keepers like Redux.
It is described in official docs here: https://reactjs.org/docs/forms.html