In my React-Native app, I have a ListView with each row being rendered by following "Solution 2". Inside my row, I have a couple of custom TouchableHighlight components. When I press the "Delete" button in my row, I'd like it to replace the entire row or all the button components in the row, with a Text component saying, "This item has been deleted".
Does anyone have any idea of how to accomplish this? I'm not sure how to link my child component's onPress method (Delete button) to the parent component (Row) and have the Row replace its content with a Text component.
I created this code snippet to reproduce what you have described: https://snack.expo.io/Bk9-6VNLW.
You can accomplish the UI change by mutating the state of your row component which will trigger the update of your component. And by reading the deleted state, you can decide what components to render whether is a set of <TouchableHighlight>' buttons or just a` component.
Related
I've created a simple calendar app using Bootstrap-Vue b-container, 5 b-rows and 7 b-cols. Each cell is a day. Within that cell is child component called Day. Each day has a Date component that shows that cell's date. Each day can have 0 or more Payment components. When a Payment component is clicked on, the number in that component is highlighted, as shown in the right cell, below:
enter image description here
When a different cell is clicked, I need to remove the highlight from the original Payment and then highlight the newly clicked Payment. How can I determine which Payment component needs to have the highlight removed?
Not sure this is a coding question, feels more like app design. But if I were you, I'd have a "selectedDay" property in the parent Vue element that would point to the highlighted cell. And then I'd raise a "clicked" or "selected" event in the child element. In the parent, you can hook a method up for to event raised by the child and act accordingly.
I have right button in react-navigation's header that is clickable, and should represent boolean value such as "selected".
Once user click on the button I want to update this value in the component's state, and reflect this change in navigation bar by changing the icon.
I know I can use setParams to send handler & initial state in componentDidMount as explained in many places, however I didn't understand how can I update the icon based on the new state, once user clicks on it.
I know also this can be easily solved with Redux and may use it eventually, but trying to understand first if there's another solution not involving state management modules.
The solution I found is simply to call setParams from the same handler that updates the component's state, however this is not very nice since I need to update both component's state & navigation bar's state.
Maybe someone can comment if there's a cleaner solution.
I need to print dates as accordion that containt many times inside,
I saved the whole date and time on one state of array, i loop my dates using collapsible like this:
<Collapsible collapsed={ this.state.date_tab !== date_index }>
{ this._renderTimes( date_index ) }
</Collapsible>
the date_tab used as selected accordion, so there's only one active collapsible allowed.
When i change the date_tab state, the whole dates and content rerender it's view so, it's make my collapsible slow to open caused all view rerender from begining.
Is there a way to close the activated collapsible, then open the pressed collapsible without rerender the other collapsible?
I tried using array, but not work, when i set state the array, it still rerender all view
Move collapsible and renderTimes to a separate component. Make the component a PureComponent. Supply collapsed prop and times array to the collapsible component.
PureComponent will render only if the props are different. So, only two of the collapsible components will render, and not all of them.
I have a Flatlist that is rendered with dynamic data, Here is the heirarchy of components used.
FlatList
List Item
Image
Button
Now these child components are rendered via "RenderItem" method of Flatlist, and everything works fine as expected, Now When I want to change any "prop" of the button by using "state" it changes the state (i can see in log) but just cant see changes to the button, which means the button is not rendered after change of state, it works fine if i use it out of the Flatlist Component, but inside, it doesnot work at all.
Any Idea Why?
In my current App I have a List of items. If the user clicks on one of these items details should appear. This details should be dispayed in a swiper. So the user can navigate to the details of the next item by swiping left.
Showing the list, the swiper (Modal) and closing the modal swiper is no problem.
But how to "navigate" the swiper to the item, which the user clicks? The data is the same (redux). I don't think, that it's a good idea to set the data of the swiper each time a user clicks on a list item?
Another questions: How to trigger the "navigateToXandShowModal()"-function of the custom component wrapping the swiper? By saving the ref in the parent component? Is this the correct way?