We Keep Coding

Antd Pagination change "page" text

I'm using antd pagination and i need to change the "page" text to something else. There is a way to change language but i don't want to change language i want to change "page" to "product". I couldn't find anything in docs
You can find the codesandbox link here to try it. I took it from the docs

you can simply use:
<Pagination locale={{ items_per_page: '' }} />

How to add custom icon in react select of search filter

I am working on react-select where I need to add custom icon with cross icon when user to select something from dropdown. I really tried hard but did not find any proper solution to resolve my problem . Could someone please help me how to add custom icon in react select .
Dropdown an attachment
As you see in attachment, you will see cross icon and I want my custom icon with this cross icon .

If you want to add an additional icon, you could still create a custom component (say for the ClearIndicator) then just add your icon to the component as a sibling alongside props.children and they should both appear on the DOM together
<Select
components={{
ClearIndicator: ({ ...props }) => (
<components.ClearIndicator
{...props}
>
{props.children}
<NewIcon>Your icon here</NewIcon>
</components.ClearIndicator>
),
}}
/>

Based on what I could find in this file, there is a component prop which takes an object which has these properties. You can probably use the CrossIcon or ClearIndicator property to specify the icon. In the end, it would like this:
<Select component={{
CrossIcon: // Icon here,
ClearIndicator: // Or here
}}
/>

React Conditional Rendering on click

I have a list of poem titles and images within article HTML tags. Whenever a user clicks on an article, I want a modal to show the poem verses. As of now whenever an article is clicked, the modals for every poem opens. How do I open the modals one at a time? This is my first time using React.
Link to my codesandbox:
https://codesandbox.io/s/and-air-52dpo?fontsize=14

You need to separate each Poem card to a component, and put the state inside them.
By using state on parent component as you did, it cause all poem card depend on same state.
I've forked your codesandbox, and fixed them. You can check it.
https://codesandbox.io/embed/and-air-543tl

You're using a single show variable in your Poems component.
This doesn't allow to show a single one of your modals, as all of them are referenced to this same variable.
I would use an integer in the Poems's state - rather than the boolean show - to store the currently presented modal.
The best option for this integer is probably the poem's index, as you should anyway add to your map function:
const listItems = data.map((poem, index) => (
<React.Fragment key={index}>
// The rest of your code is the same
<Modal
show={this.state.currentModal === index} // only this property was updated
onClose={this.showModal}
title={poem.title}
>
// modal code
</Modal>
</React.Fragment>
))

Vue.js: Communicate with components that are down the DOM

I'm just trying out Vue.js and I'm struggling with the key concept of passing information up and down the DOM from one component to the other.
Consider this example in which a container-toggle button should toggle all components within the container, or say, set them all to "true" or "false".
<div id="app">
<p>
<strong>Welcome!</strong>
Click the "true/false" buttons to toggle them.
Click the "Toggle all" button to toggle them all!
</p>
<app-toggle-container>
<app-toggle></app-toggle>
<app-toggle></app-toggle>
</app-toggle-container>
<app-toggle-container>
<app-toggle></app-toggle>
<app-toggle></app-toggle>
<app-toggle></app-toggle>
</app-toggle-container>
</div>
In this code pen, I've defined app-toggle and app-toggle-container as components: https://codepen.io/fiedl/pen/mmqLMN?editors=1010
But I can't find a good way to pass the information down from the container to the separate toggles.
Also, in a second step, when trying the other way round, for example, to have the "Toggle all" button just show "true" if all toggles are true, or to show "false" when all toggles are false, I can't find a way to pass the information of the current state of the toggles up to the container.
This doesn't seem like an uncommon problem. What is the proper way to do this in Vue.js? Or am I thinking about this it in the wrong way?
Quickly, I've found $broadcast and $dispatch. But as they are dropped in Vue.js 2, I'm most probably thinking about it in the wrong way :)

I forked your pen http://codepen.io/nicooga/pen/wdPXvJ.
Turns out theres a $children property for Vue components that contains your children components [controllers]. You can iterate over them and do stuff with them.
this.$children.forEach(c => c.toggle());
See
https://v2.vuejs.org/v2/api/#vm-children
VueJs Calling method in Child components.

React Native: Swipeable and Touchable

I want to register three gestures in one container of the view:
When user touches the Card -> Load Detail about the Card
When user swipes down the Card -> "Like" it and display next card
When user swipes up the Card -> "Skip" it and display next card
My current implementation uses PanHandler to register the gesture and uses TouchableOpacity to reduce the Opacity when card is being swiped.
But I'm not sure how to implement those three above gestures for the same exact card.

You can just use a <TouchableHighlight /> (or any other 'Touchable' component) nested inside of a <Swipeable /> component (typically implemented using the react-native-swipeable library).
So something like the following:
{/* Props are not set in this example for simplicity */}
<Swipeable>
{/* You should of course nest some components in the next element if you want to */}
<TouchableHighlight />
</Swipeable>
I fixed it like this myself.
By the way: Nesting the elements the other way around (like so <TouchableHighlight><Swipeable /></TouchableHighlight>) gave me a lot of issues, so I don't recommend doing that.