So currently I have an issue where I have a Channel Tab where it displays the channel icon and name. Now the problem is, every time I change channels the icon stays the same as the first channel I clicked.
PREVIEW
This is my current code: https://sourceb.in/IsTYrBRjMv
How do I make it change every time I enter a new channel?
Note:
Every channel has a different endpoint
Try adding a useEffect, something like this (you may need to adjust)
useEffect(() => {
setData(channel.icon);
},[channel]);
Related
I having problem when switching pages for my react app
supposedly i have this page that displays item information for example
items/1231231231231 = display the items for that specific id and then when i move to another item using Link
<Link to{'/items/22334567'}
to move to another item and display the item infos, on its initial render the item infos from the first item (items/1231231231231) is displayed first or loaded first then after the data has been fetched for the new item, it will only display the correct information for the next item ('/items/22334567') . I understand that it is important to cache files so that when user access the same data again the browser will not fetch the data again, but the thing is this interaction is kinda confusing in my part, so I want to disable caching or displaying of the first information before loading the next information by comparing their (id) this is what im thinking. Is there any way to achieve this?
You simply need to clear the state when you start loading new data on change of item id. I have to assume how your Item component code looks like but let us say you have a state items and a setter setItems. If you load your data in a useEffect, you can do something like this:
useEffect(() => {
setItems([]);
// display loader
// code to fetch items
}, [props.itemId]
If you load new items, another way e.g. in Redux or something, please think about the exact step where you need to reset the items to an empty array. It could be the reducer or some other place.
I'm building a bot in discord and i would like to add a slash command feature that will allow the user to select a choice from many (like a drop down menu). However, you can't add more than 25 choices for a slash command option. So my alternative solution is to have a content matching preview like with giphy bot when the user type a string i will update the content accordingly.
However, i don't find any guide on how i can implement this behavior. is it about updating choices on interactionCreate event?
The way the bot is doing that is through something called Autocomplete. Basically, you can declare a command to have Autocomplete and then, in the interactionCreate event listener, you can check if the command is an Autocomplete interaction, then respond with something. You can set the command to be Autocomplete by using this in one of the options for the command:
.setAutocomplete(true)
Then, in your main file, where you have the interactionCreate event listener, you can just check when a command is an Autocomplete interaction by using interaction.isAutocomplete(). Then, you can respond to the interaction by using this:
const value = interaction.options.getFocused() // This gets the value which the user typed
const response = await interaction.respond({
name: '', // The name of the response
value: '' // The value of the response
})
You can learn more about Autocomplete here => Autocomplete | discord.js
However, I'm not sure if any bot can do that since this was hard coded to be like that by Discord and since bots can only respond with strings (I think).
In react-navigation 4, I was passing a function as a param to the navigated screen. But in react-navigation 5, this has a warning which is not recommended. So now how can I update params of previous screen from current screen ?
Example:
I am in a chat group.
I click on group image.
In the new screen I update group name.
Now I return back by clicking hardware back button.
And now the group name should be new updated name.
So how this is possible ??
I know I can use navigation.navigate() to go back with params, but in most cases there users use clicking on hardware back button instead of clicking the back arrow.
You can use the new way to handle Hardware Back Button described here: https://reactnavigation.org/docs/en/custom-android-back-button-handling.html#__docusaurus
But I don't think you should go this way. You should connect the group name to a local storage, and watch this variable in the render function. It's better to let the render to update itself instead of trying to do some force refresh with the back handler.
You can use a store (using redux, hooks or using local storage). Then you can use Navigation events => focus method when the screen comes into focus. Then you can get the updated store data and re-render the UI.
I am switching to payment intents and am trying to reuse a saved card. (react-stripe-elements)
This works quite well right now and instead of
stripe.handleCardPayment(intentData.client_secret);
(as suggested in the docs) I am using the following, because this worked.
stripe.confirmPaymentIntent(intentData.client_secret)
With the first one I always got an error, that the card number is not filled out - seems like it always takes the react-elements-form that is on the same page as a basis.
It worked and I could pay with my saved cards until now, but now I tested it, with the "requires auth on all transactions" card: 4000002760003184
When I use confirmPaymentIntent it just gets stuck on the status: [status] => requires_source_action
How would I go about and show the "confirmation" dialog, as it did with the handleCardPayment method, in case it is needed?
The transactions are all happening on the page and are triggered via react-stripe-elements.
Seems like react-stripe-elements will always take the Elements form context, whenever you have a form initialized (which I had on the same page) and you use the stripe prop.
This is pretty neat, when you fill out the form to add a new credit card, but really annoying, when you don't want to use form data, but your saved card.
I asked the stripe support and they told me, that there is no way to get around this, so I looked around a little more and found, that react-stripe-elements is just using the normal Stripe JS SDk and thereby the window.Stripe object should be available (out of the content) to do this easily.
So this is how I solved it for us:
const { stripe } = this.props;
// if we use a saved payment method and the Stripe obj is available
if (isSavedPaymentMethod && typeof Stripe !== 'undefined') {
// don't use the context bound stripe from react-stripe-elements, but the uninitialized Stripe and pass your key
const stripeOutofBound = Stripe(STRIPE_API_KEY);
await stripeOutofBound.handleCardPayment(
intentData.client_secret,
);
} else {
// otherwise use the react-stripe-elements prop directly, that passes the new credit card form data
await stripe.handleCardPayment(
intentData.client_secret,
);
}
I have a panel on the left hand side of my app.
On the right side, the admin can select a 'User Name'. Once the User Name is selected, i need to get categories of the selected user. From the displayed categories, I can chose one for which it will display all the items.
User Name > categories > items
I also want my url to change accordingly like localhost/users/categories/items
The left side will not change at all in this process, hence I do not want to re-render it. At present I have three pages, with the navigation configured.
Actually I want to place some animations on the right side as an option is clicked. The alternative i found was to define onClick and change the component with some animation - but this kind of does not allow me to change the url.
What is the best way to handle this?
I am using next-js in my react application.
The alternative i found was to define onClick and change the component with some animation...
That's a correct approach.
...but this kind of does not allow me to change the url.
You can user browser's history to manipulate url without page reload.
For instance
const state = {};
const pageTitle = 'My Item';
const url = 'users/categories/items';
history.pushState(state, pageTitle, url);
If you have <a href's /> in your page, you might want to override their behaviour too, otherwise they'll trigger a page reload as well.