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);
});
}

Trying to add functionality to select option

In my program the user first enters some data to filter and the result goes to one dropdown select menu lets call this functionality function_1 . If there is only one result the it goes to make another query, lets call this function_2.
My problem here is when i have 2 or more results i should be able to:
1) check out the different options i get by clicking on the select to display all the options with a scrollbar if needed
2) After he saw the options there he clicks on one of them to activate function_2
The usual answers use the "change" event but, wont work if the user picks first default value because there is no change, he would have to pick an undesired result and go back to the first.
Using the click event on the select makes also unnecessary work because it triggers twice (one when i open the dropdown, other when option is selected)
Main problem here i think is the jquery selector, but im not sure if it can be done just with that.
This is an example of what im trying:
// function_1 in ajax
.done(result){
$.each(result.data,function (){
$('#select_ex').append("<option value...... ></option>");
if (result.count()===1){
$('#select_ex').trigger('change');
}
});
}
$('#select_ex option').change(function(){// tried with change, click or focus
function_2();
}
The html contains
<select name="select_ex" id="select_ex" size="0" ></select>
EDIT:
Not related to the duplicate question mentioned, since i already know why it doesnt select the option, besides it doesnt apply either since it only talks about connectors with ID, which is not even the point here (I could do my thing without IDs). Im asking for funcionality similar to ":selected" but with option->click.
Another workaround i thought of is filling the select with an empty/hidden field and set the selected property it, filtering afterwards and using the regular change event... but then the first item would be blank and doesn't seem very logic to me.
So I came to seek for any fresh ideas.
EDIT2
I added a white option for the multiple result and erased it afterwards by adding this line of code to imvain2 solution (where needed)
$("#select_ex option[value='0']").each(function() {$(this).remove();});

Although fixing your change function so that is is called for the select and not the option is important, your problem is the default selected option itself. As you mentioned, if they want the first option, they have to select something else to trigger the change function.
I would recommend adding a "blank" option as the first option and setting it as selected.
var $select_ex = $("#select_ex");
.done(result){
$select_ex.empty().append("<option value='0'>Select Your Ex Below!</option>");
$.each(result.data,function (){
$select_ex.append("<option value...... ></option>");
});
$select_ex.val("0");
}
$select_ex.change(function_2);

Dynamic ajax/php select tag

Good evening,
I got a small issue with my dynamic select thing like already said in the title. My goal is to reach the following result:
If someone selects an instrument from the first select tag, the other tag called "Besetzung" should filter a list of users who play the selected instrument, for the second select tag like shown in the
screenshot
(Instrument = instrument; E-Bass = electric bass; Besetzung = occupation; Offen = open)
This works fine so far. But my problem is, that i got like 3 to 10 of these blue boxes (screenshot). You can add these boxes manually over a button. And every single box should contain these "individual" select tags... So i need something like a unique ID for each select tag, each time a box is added. So this is my function for the dynamic selection so far:
function fetch_select(val)
{
$.ajax({
url: 'get_data.php',
type: 'POST',
data: {
get_option:val.value
},
success: function (response) {
document.getElementById("studentSelect").innerHTML=response;
}
});
}
If the function succeeds the element with the ID "studentSelect" is changed. But what I need is something like an array or so, which is used in my html, php and ajax to change every single element... I got no idea how to give every single select tag a unique ID because the number of tags will change while someone is using the website.
I hope you understood what I mean, was a bit difficult to explain for me.
Thanks for any help in advance.

What you would normally do is use a common class for all elements involved.
Then within the change events you can get the specific instance of the select class that was changed and use that to traverse to the corresponding other select to poplulate
Repeating structure
<div class="row">
<select class="select-1"></select>
<select class="select-2"></select>
</div>
JS
$(document).on('change', '.select-1', function(){
// traverse to closest row, then look within that row for matching select
var $otherSelect = $(this).closest('.row').find('.select-2');
$otherSelect.load('get_data.php', {get_option: this.value})
.fail(function(){ alert('Oops something went wrong')});
});

So you have two select lists, the second one depends of what is selected in the first one. That is a very usual task in questionnaires.
The first thing you did, is to change the second select list via ajax,trigger by a change in the first select list right? (that is fine)
So you basically need is the php(server side code) that returns the html of the 2d select list. Isn't it?
Whatever, what we need here is the list of options for each option of the first list. That info should go server side in tables or arrays if you want.
if you provide the options list for each option of the first list then I or somebody else can help you with the php for it.

how to pass arguments into an event handler to make it unique?

please run this jsfiddle as an example.
http://jsfiddle.net/AFzqt/11/
in my example, i have a link saying same as above, if you fill out the first box it will copy the value in the second box. look at the code, and look at the display. theres a reiteration of the code just to have the boxes appear twice. well... in my real use of this, i ideally want there to be about 40 of these buttons.
is there a way to do this without copying the code 40 times?
i am new to jquery, usually in another language i would just pass in arguments, but with this syntax I don't see how i can do that? how can i handle this?
feel free to dabble around on my jsfiddle, and hopefully link a new revision, with the goal of reducing the handling of those 2 'same as above' buttons into just one function with the entry id's as parameters

If you add the changeButton class to each of the buttons it will be easier to select each of them to bind the event handler:
Same as Above
Then we can select each of the elements like so:
$(".changeButton").on("click", function(e) {
//select the previous jQuery Mobile select widgets, we will use just the previous two
var $allPrev = $(this).prevAll('.ui-select').find('select');
//change the value of the immediate previous select widget to the value of the one preceding it
$($allPrev[0]).val($($allPrev[1]).val()).selectmenu("refresh");
e.preventDefault();
});
Here is a demo: http://jsfiddle.net/AFzqt/12/
This code will work for umpteen buttons since it works by using intuitive knowledge of the HTML structure (each link uses the previous two select widgets, no matter where on the page the link resides).

What about something like this?
function bind_click(button_id, target_id, origin_id) {
$(button_id).on("click", function(e) {
$(target_id).val($(origin_id).val());
$(target_id).selectmenu("refresh");
e.preventDefault();
});
}
$(function() {
bind_click("#changeButton2", "#entry_20", "#entry_18");
bind_click("#another", "#entry", "#entry2");
// More binding declarations
});

Auto Complete Fields in Rails that Display Something Different Than What They Select

I'm trying to create an auto complete field (using the script.aculo.us plugin) in a form for a category select, but I want the auto complete list to display a number next to each category (the number of other things in the same category). This is similar to the Tags field on stack overflow.
Right now I can display the number I want, but when I select any field the extra number gets dumped into the text field with the category. Currently I'm simply appending the number to each item on the array before I display it. How can I make it so when you select something from the list the number (enclosed in parentheses) does not get put into the text field. Thank you.

I finally solved my problem, I just needed to figure out what some of the plugin's options were. It turns out there is an option for the auto_complete_field helper called :select. The value you provide to this tells the JavaScript which part of the <li> element (the HTML tags the results are displayed in) to return to the text box.
The solution was a simple matter of enclosing the name of the category in a span with a special class and leaving the number part I didn't want outside of this class. This was easy since I was already using my own partial to display the results.