js variable or function that needs to be passed to jsx

Hey community,

I understand how to pull content from jsx to js, but I cannot figure out how to grab a variable from a function into jsx. I have an extension with a dropdown that selects a swatch. I learned from others on here how to pull the indexes of the swatches and show the names of them with JSON. but now I need to push the index number of the selected value to go back to jsx to change the color of text with a button.

In my js:

//textcolor button
var textColorBtn = document.querySelector("#textColorbtn");
textColorBtn.addEventListener("click", textColor);
function textColor() {
    csInterface.evalScript("textColor()");
}

function selectedSwatchIndex() {
//grabs the data in dropdown html selected
var getSelectedValue = document.getElementById("swatchNumber");
//finds what index the data is
var selectedSwatch = getSelectedValue.options[getSelectedValue.selectedIndex].value;
    alert(selectedSwatch);
var sIndex = selectedSwatch;
    alert(sIndex);
return sIndex;
csInterface.evalScript('selectedSwatchIndex("' + sIndex + '")');
}

so the var selectedSwatch is what displays the value of current dropdown.

so here is what i have as far as jsx goes:

//button text clicked. the function then runs
function textColor() {
    textColorSelection();
}

//function to select colors
function textColorSelection() {
    
//code to change text color
  
}
//end swatch function

function selectedSwatchIndex() {
//grabs the data in dropdown html selected
var getSelectedValue = document.getElementById("swatchNumber");
//finds what index the data is
var selectedSwatch = getSelectedValue.options[getSelectedValue.selectedIndex].value;
    alert(selectedSwatch);
var sIndex = selectedSwatch;
    alert(sIndex);
return sIndex;
}

I left a lot of code out to not lengthen this post. so right now. I put a variable with an index just so I can test until I get the function from js to work. I know I need to do something with evalScript, but not sure what that is. 

Any ideas?