I made something using the discord-buttons module but I want to put the buttons side by side. What should I do?
My Code:
await message.channel.send(gönder, { components: [row, row2, row3, row4]
});
Image
Use one ActionRow instead of four. That is, pack all four of your button components into a single ActionRow object, and then pass that sole row to your components array.
Related
I have a React application that opens a modals conditionally when buttons are pressed. I want a way to access these modals even when they haven't been rendered yet so that I can save the modals as an image in one go using html2canvas. I am able to save the modals as an image individually after I open them but I want to make the process more efficient by saving all the images of the different modals in one go. How can I do this when I have no access to the different modal element IDs since they have not been rendered yet?
This is the current code I have to save the image of the different modals separately after I have opened them:
if (elementId) {
console.log(elementId);
const screenshotTarget = document.getElementById(elementId);
console.log(screenshotTarget);
html2canvas(screenshotTarget, { scale: 0.9 }).then((canvas) => {
canvas.getContext("2d", {
willReadFrequently: true,
});
const base64image = canvas.toDataURL("image/jpeg");
download(base64image, elementId + ".jpeg", "image/jpeg");
});
}
I have considered having all the different modals just load when they are created and then set the display property to none but I don't know if it is inefficient to just render all the modals at once and just hide them. Is there a better option than this?
I fixed this by essentially just rerendering the components I wanted to access when the button was pressed. I found no other way to access the components which are rendered conditionally so this was the only viable solution I could find
I have multiple buttons in my component and all of them should be disabled.
const buttons = screen.getAllByRole('button');
expect(ALL BUTTONS).toHaveAttribute('disabled'); // I want something like this.
How can we write this in the most convenient way?
Iterate the buttons array and run the expect for each one
buttons.forEach((button) => {
expect(button).toHaveAttribute('disabled');
})
I used this code in my test:
buttons.forEach((button) =>{
expect(button).toBeDisabled()
})
or you can write this:
expect(buttons).toBeDisabled().toHaveLength(2)//here you put number of your buttons
I have two questions about anychart.
(1) I have implemented drawing tools like below (except for "Label") with React
and am wondering if it is possible to implement a functionality for "Label" with React,
i.e. let user modify an existing label's text.
https://www.anychart.com/products/anystock/overview/
Drawing Tools And Annotations
(2) If I select (click on) an existing label, it seems getSelectedAnnotation() can't get the selected one.
The following code is in React functional component, probably is this the reason of that?
chart.listen(`annotationSelect`, function (e) {
if (e.annotation.type === `label`) {
console.log(e.annotation) // this prints e.annotaion object
const s = chart.annotations().getSelectedAnnotation()
console.log(s) // this prints "null"
}
})
A1 - you can implement any logic you need to modify the label annotation and UI approach. The library has all the required API. For example, you can listen for keyboard inputs in the hidden text area and apply text to the label. For details, check the live sample.
Simply select the label and start typing the text.
A similar approach is used in the demo app.
A2 - You need to wait until the next round of the JS event loop. For example, with setTimeout with zero time to schedule a task on the next round. Here is the modified sample.
I am making website for clothing store as my practice.
i dont known how make only one file used in all components using map function and when clicking on one a card, that card information will render in product view component. i dont known backend development yet.
can this be achieved by usecustomshooks or make json file?
Map will go through all objects in the array and use them as an argument of a function. For example [1, 2, 3].map(num => console.log(num)) will print out numbers inside of an array. The same way you can use it to fill in the data in the product view component:
{itemData.map((data)=> <ProductViewComponent data={data}/>)}
Use return () after the arrow function if you want to write more code inside.
I have a Chart component that consists of Cell components. Both the Chart and the Cells use useContext hooks and I provide that context in an outer layer. I want to create a new chart that is similar, but uses a different context. For instance, the original chart stores and looks up information based on keys that are different: when I populate the original context it looks like: {'player 1': [], 'player 2': [], 'player 3' ...}, but the new context will look like: {'You': [], 'Your opponent': []}
Should I pass a parameter/flag to the Chart component that tells it what context to use? And then I could do something like: const [selectedCombos, handleSelectedDispatch] = usePlayers ? useContext(OriginalContext) : useContext(OtherContext)
Can I even do something like that? I know it smells bad, but the only alternative I see is copying the Chart/Cell components to a new file, changing the context it uses and renaming it. That also sucks. What is the right approach here?
I've tried simply copying the code to a new component and using a different context, but that stinks too.
Passing a flag is kind of bad because what if you think in the future, what happens if the Cell can use 3 different context? Or more?
Ternary will be bad. And you will be importing context that won't be used.
What you can do is pass a prop with the context.
e.g.
// File that render the cell.
import OnlyTheContextYouNeed from '../mycontext/OnlyTheContextYouNeed'
...
<Cell usedContext={OnlyTheContextYouNeed } />
...
//Cell.jsx
...
const [selectedCombos, handleSelectedDispatch] = useContext(props.usedContext)
This way you don't have to import all the contexts you have in Cell and you only import the context you will need and use when you render Cell.