I want to achieve something related to this:
https://codesandbox.io/s/3vqyo8xlx5
But I want the child to appear under the preference of where the button of "Add Child" is clicked, not on the last one.
Please, I need help on this
Is this your code? Look the way it's designed, you're using one array to store parents and other to store it's children. Instead, why don't you create an array of objects in the state, then add a new object when you input preferences, add the preferences as values of each object, then just render them using array map (one for objects and one nested map to get the values of each parameter).
Related
I have an array of objects stored in my main component(to avoid using redux). When I display the tasks, the list comes as a single entity, just like a paragraph. I want to separate each task and add two buttons in front of each task.
this is my code to display the array of objects
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 two sibling component.
one component contains textbox,checkbox,dropdown controls in it.
another component contains Kendo Grid.
whenever user clicks on grid row i want to set focus on one of the element in above
component which include textbox.
Approach used:
1.I don't want to use ref as i have multiple controls in one component.
2.I have dynamically added autofocus attribute to input element.
Disclaimer: I am not sure if these solutions are best practices in React
There are 2 approaches for this, both using refs, but with smarter implementations:
Create a wrapper around the inputs and assign refs to it. Whenever you want to focus on an input, simply use wrapperRef.querySelector('[name=yourInput]). Working example: https://codesandbox.io/s/195kkrpvq
Create an object which stores the name of the fields as keys and their refs as values. Simply use this.yourRefsObject[yourInputName].focus() to focus on an input. Working example: https://codesandbox.io/s/61jl7q9v43
Again, I am not certain whether these implementations are best practices, but they should do the job for now
In my sencha touch 2.3 app, I have a page that has few toggle fields, text fields etc. I want to set values on these fields every time the page is shown (it might have different set of values every time).
The parent container of this page is a panel that has card layout. I show the different pages using setActiveItem('pagextype');
Now, if I set values during initialize, it will get set once, but the next time the page is shown, initialize will not be called. And the elements will not be set to the new values.
Instead of initialize, I used painted event. This works fine. But whenever I go to the page, for a moment it displays the old values and then updates itself to the new values.
What is the best way to handle this scenario?
You can follow below steps.
Store data in some array or any object(let say OBJ) during initialize().
Create a method updateData(index),which is responsible for updating data in the card layout element on the basis of index.this method is called from activeItemChange event function,which is called whenever there we swipe the item in card.
Now by default index 0 item on card layout is shown.
when we swipe,activeItemChange for the next item is called,you can write your logic inside updateData() method to update the data from the initial array/object(OBJ) on the basis of index.
Showing an example will likely make more sense than trying to explain this. Please reference this http://plnkr.co/edit/ipGYEX?p=preview as it ALMOST does exactly what I need.
In the example, click Add to create a new select menu and choose an option. This should add it to the parent form. Currently I'm handling this aspect with an $emit. The core problem is that I can't find a way to assign $index to each select. I'd like to attach it to the model name in order to make each one unique. However, simply doing something like ng-model="selectNum{{$index}} causes an error when passed through attrs.ngModel. As is, the ngModel is repeated for each dropdown that's added and thus, every time the form gets overwritten. I WANT to add each select as a unique object to the form - and update that specific instance should the associated select change.
Can anyone provide some insight on how to either attach the $index or perhaps another way of updating the form?
Not a direct answer to getting the values into the form object, but here's an option similar to something I'm doing for a very similar situation:
http://plnkr.co/edit/uEHFWgRQ9fP2gpeWuE5y?p=preview
Basically storing the values within the elements of the array being repeated on, then I use that object from the model for a post to the server.