We Keep Coding

How Do I Target A Specific Node In React Component and Have Independent Behavior When Component is Reused?

I am trying to target a specific node in my react reusable component and perform an operation on it. But I want to be able to do same thing several times independently because I will be returning this my reusable component several times on the same page on my App.js. How do I target that div node uniquely?
Here is my situation:
I created a react class component (I am not using function component for this project). This component contains two divs and a button. The first div is a red box. Under it is the second div which is empty with the class "result". There is also a button. When I click this button, the package Html2Canvas will convert the first div into an image and append it to the second div.
Now from the Html2Canvas documentation, they only specified how to append the generated canvas to the body of the DOM:
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
});
Since I needed to append to that empty second div, I did:
html2canvas(document.querySelector("#capture")).then(canvas => {
document.queryselector('.result').appendChild(canvas)
});
This would have been fine if I am just using this component once on a page, but in my App.js, I am actually returning this my component multiple times, so what now happens is that each time I click that button, it targets only the first instance of the empty whereas what I need is that each occurrence of my component should behave like the first one independently.
Yes I have tried using CreateRef() to target the current occurrence oof the empty dive but it does not work. It sees the ref as undefined when I call it inside the Html2Caanvas function. But outside of it, it is defined. Ok I tried creating the ref inside, still gave an error of undefined.
I understand that this whole thing I have written may be somewhat vague, so here is a CodeSandBox example of what I want.
When you open it and click on the first "Finish" button, you will see that the red box gets converted to an image, and the image is added under the red box, that is, it is appended to the div with class "result". But when you click on the second "Finish" button, instead of the generated image of the blue box coming under the blue box div, it goes under or beside the previous image. The expected behavior is for it to appear under the blue box. And if I replicate that component "ReUsable" as many times as I want in the App.js, the same behavior is expected. Independence.
I know this is a lot. I look forward to and appreciate your solutions.

First, the ref approach was great (the one you commented out), only that you were referencing the containerRef and not the screenshotRef.
the main issue came from the callback function passed to html2canvas, even though you called bind on handleFinish, binding "this" context to the current class context, the execution context of "this" in the callback is undefined because you used a regular function and regular function always refers to the context of the function being called(html2canvas).
arrow functions on the other hand treat the "this" keyword differently. They don't define their own context.
kindly update your handleFinish method to this
handleFinish(event) {
html2canvas(this.containerRef.current, 1).then((canvas) =>{
this.screenshotRef.current.append(canvas);
// document.querySelector(".result").append(canvas);
});
}

Do something with the particular element even though click event is fired on class name

I have a scenario where a dropdown launcher menu should appear on every row in a list page. I have tweaked the code here.
I want the popover (open) behavior be restricted for the click on the particular launcher-icon, though close action is perfect here.
the problem is when any icon is clicked, it shows all menus. My page has rows inflated from a database and every row has three such launcher icons.
I guess this block of code needs some tweaks:
// Click event handler to toggle dropdown
$(".button").click(function(event){
event.stopPropagation();
// How can I call toggle for the specific div element?
$(".app-launcher").toggle();
});
How can it be done?

You need to traverse the DOM to find the .app-launcher instance which is related to the clicked .button element, to do that use closest() and find(), like this:
$(".button").click(function(event){
event.stopPropagation();
$(this).closest('.launcher').find(".app-launcher").toggle();
});
Updated CodePen
I would also suggest looking in to using a single instance of .app-launcher and moving it around the DOM as required to DRY up your HTML code.

Adding HTML element after the dataset is brought in

In Typeahead JS I'm trying to add an option that appears at the bottom of the dropdown after the user has started typing. Currently I'm using the 'onOpened' Custom Event to trigger adding some HTML after the 'tt-dropdown-menu' element is initialised.
.on('typeahead:opened', onOpened)
function onOpened($e) {
$('.tt-dropdown-menu').html( "Add Option" );
}
The problem is that the jQuery HTML is added when the dropdown is initialised, as expected, then when the user starts typing the new dataset element with the autocomplete results in is added below that jQuery HTML so the jQuery HTML can never appear at the bottom of the dropdown. You can't append the jQuery HTML to the dataset either as that element doesn't exist when the dropdown is initialised.
Is there an easier way around this? The other Custom Events don't seem to cover this scenario.

If you only have one dataset, you can do as I do: add a footer to the dataset, and add it as a DOM element, not plain HTML string. You can then change it at will (say on any event you wish) and your changes are reflected in the dropdown.
Example:
$('#myinput').typeahead({
// rest of your regular stuff, like 'name', 'remote', etc.
footer: $('#dropdown-footer'),
});
... where dropdown-footer is the ID of a div you have somewhere in your dom. You can then do things like:
$('#dropdown-footer').html('Hello')

Paste into text field TideSDK

I have the following code, I want a user to be able to copy or paste into a text field,
basically imitating a ctrl+c or ctrl+v
My problems are:
how to make sure the context menu only appears in text fields
how to paste the text into the region.
I have been through the docs and so far I have this NOT working:
var menu = Ti.UI.createMenu();
menu.addItem('Copy', function() {
var data =$.("#this").val()
Ti.UI.Clipboard.getData('text/plain',data);
});
menu.addItem('Paste', function() {
var data =Ti.UI.Clipboard.getData('text/plain');
$.("#this").val(data)
});
function showrightmenu(){ Ti.UI.getCurrentWindow().setContextMenu(menu);}
I could call this using oncontextmenu= "showrightmenu()" but now, how to paste something in this line:
$.(#this).val(Ti.UI.Clipboard.setData('text/plain'))
AM GROPING IN THE DARK. I'm a newbie to TideSDK, this is my first project.

Question 1
I'm new to TideSDK as well and might be wrong, but as far as I can tell from the API documentation, context menus are bound to a window, and displaying different context menus when right clicking different parts of the window would require you to each time change the window's context menu...
Example:
//Create different menus
var context_menu = Ti.UI.createMenu();
var copy_menu = Ti.UI.createMenu();
//Add menu items etc.
...
//Change context menus on click events depending on clicked element
$('#some-element').mousedown(function(event){
if(event.which==3){//detect right click
editor_window.setContextMenu(context_menu);
}
});
$('#text-field').mousedown(function(event){
if(event.which==3){//detext right click
editor_window.setContextMenu(copy_menu);
}
});
This way, when you click the element with id some-element, the first context menu is shown, and when you click the #text-field element, the second context menu is shown.
Note that this won't work if one element is inside the other, because then both events are fired.
Question 2
In this code you supplied:
$.(#this).val(Ti.UI.Clipboard.setData('text/plain'))
You want to use Ti.UI.Clipboard.getData and not Ti.UI.Clipboard.setData, since you want to get the text stored in the clipboard and then put it into the text field. Also, you might want to change $.(#this) to $("#this") or $(this).
This should work:
$("#some-element").val(Ti.UI.Clipboard.getData('text/plain'))
Remark
You seem to be confused about how to use jQuery. To select an element, you use $() and not $.(). Also, with $("#example") you select the DOM element with the id example. $(this) is used inside a function called when an event is fired, and refers to the element on which the event was fired. $("#this") is not the same as $(this). Hope that helps a bit...

How to handle Android's Back Button click in a single HTML page webapp using PhoneGap?

I read from the documentation that we can handle the back button click using the following code:
document.addEventListener("backbutton", backKeyDown, true);
function backKeyDown() {
// Call my back key code here.
alert('go back!');
}
My concern is that I have a single HTML5 web page in which I have multiple div tags which I animate using jQuery as per the navigation option selected by the user from the menu options.
How can I, in this single page webapp, handle the back button click using PhoneGap and show the user the previously animated div. Clicking on the back button again would again take him to the previous div of the current previous div :-)
Thanks.

I solved the problem by creating a global array variable as
var myStack = new Array();
Then whenever I clicked on the div tag, I inserted the function prototype along with the arguments inside the myStack variable. For eg:
myStack.push(\"myfunction(args1, args2);\");
Then, using the code which I posted in my question, inside the BackButton handler, I wrote the following code:
var divToShow = myStack.pop();
eval(divToShow);
Hope this helps others.

I did an implementation in a similarly structured phonegap app. My situation was a bit more complex because I was loading in html as well as external data via ajax (rather than just unhiding divs). I created a global array called history which I used to keep track of current position as well as previous positions (position here being the most recent ajax function called, so the array was actually storing function names as text). The right sequence and combination of .pop and .push array methods got me a fully functioning js back button that scaled nicely and handled any kind of back and forth navigation I could think of.

I will just post my overall idea of handling this situation. Hope you can improvise and change it to suit your needs.
Have a global variable to remember the current div id that is
visible. For example, when a menu item x is clicked, set this global
variable to the div id that is currently visible (before showing the next div corresponding to menu item x).
When the back button is pressed, use the global variable's value to identify the previous div. Hide the current div and show the previous one.