Show React select dropdown with multiple lists mapped to the same drop down

PHOTO

Wed Sep 22 2021 23:11:26 GMT+0000 (Coordinated Universal Time)

Saved by @SlimPickins ##react ##reactselect ##javascript ##dropdown

<select
    className="form-control form-control-sm"
    id="assettype_id"
    disabled={!types ? 'disabled' : ''}
    onChange={this.handleChange}
    value={details.assettype_id || ''}
>
    <option value="0">Choose Type...</option>
    {popularTypes.length
        ? popularTypes.map((r, key) => (
                <Fragment key={r.id}>
                    {key === 0 && (
                        <option value="0" disabled>
                            --- POPULAR ITEMS ---
                        </option>
                    )}
                    <option key={key.Id} value={r.ID}>
                        {r.Name}
                    </option>
                </Fragment>
            ))
        : null}
    {types.length
        ? types.map((t, key) => (
                <Fragment key={t.id}>
                    {key === 0 && (
                        <option value="0" disabled>
                            --- ALL ITEMS ---
                        </option>
                    )}
                    <option key={key.Id} value={t.ID}>
                        {t.Name}
                    </option>
                </Fragment>
            ))
        : null}
</select>

COPY

This uses two lists mapped into the same drop down. This list was used to show the most popular items that are contained in the second list.

Save snippets that work from anywhere online with our extensions

Comments

More like this

##javascript ##js #next.js #react.js

Animate header on scroll with Next.js & TailwindCSS

const [animateHeader, setAnimateHeader] = useState(false)

useEffect(() => {
  const listener = () =>
  window.scrollY > 140 ? setAnimateHeader(true) : setAnimateHeader(false)
  window.addEventListener('scroll', listener)
  return () => {
    window.removeEventListener('scroll', listener)
  }
}, [])

// Example usage with TailwindCSS:
<div className={`bg-header/75 transition duration-500 ease-in-out ${animateHeader && 'bg-header/[0.95]'}`}>...</div>

##react ##reactselect ##javascript ##dropdown

Show React select dropdown with multiple lists mapped to the same drop down

<select
    className="form-control form-control-sm"
    id="assettype_id"
    disabled={!types ? 'disabled' : ''}
    onChange={this.handleChange}
    value={details.assettype_id || ''}
>
    <option value="0">Choose Type...</option>
    {popularTypes.length
        ? popularTypes.map((r, key) => (
                <Fragment key={r.id}>
                    {key === 0 && (
                        <option value="0" disabled>
                            --- POPULAR ITEMS ---
                        </option>
                    )}
                    <option key={key.Id} value={r.ID}>
                        {r.Name}
                    </option>
                </Fragment>
            ))
        : null}
    {types.length
        ? types.map((t, key) => (
                <Fragment key={t.id}>
                    {key === 0 && (
                        <option value="0" disabled>
                            --- ALL ITEMS ---
                        </option>
                    )}
                    <option key={key.Id} value={t.ID}>
                        {t.Name}
                    </option>
                </Fragment>
            ))
        : null}
</select>

##js ##javascript ##vanillajs ##dates ##formatting

JavaScript Dates

//* DATE
let currentYear = new Date().getFullYear().toString()
let currentMonth = (new Date().getMonth() +1).toString()
let currentDay = new Date().getDate().toString()
currentMonth.length == 1 ? currentMonth = '0'+currentMonth : currentMonth = currentMonth.toString()
currentDay.length == 1 ? currentDay = '0'+currentDay : currentDay = currentDay.toString()
let yyyymmddToday = [currentYear, currentMonth, currentDay].join("-");
console.log('yyyymmddToday', yyyymmddToday);




// Get date
let date = new Date();

// Format variable named 'date' as MM/DD/YYYY
formatDateMDY() {
  return (
    this.date.slice(0, 10).split("-")[1] +
    "/" +
    this.date.slice(0, 10).split("-")[2] +
    "/" +
    this.date.slice(0, 10).split("-")[0]
    );
   },


// Get today's date in the default format string: '2020-10-11T00:00:00+05:30'
let date = new Date();

// Format as MM/DD/YYYY
let monthDateYear = ((date.getMonth() > 8) ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))) + '/' + ((date.getDate() > 9) ? date.getDate() : ('0' + date.getDate())) + '/' + date.getFullYear();
console.log(monthDateYear)

// Pad Numbers (as seen in UnixIsoDate)
let zeroFill = ( number, width ) => {
  width -= number.toString().length;
  if ( width > 0 )
  {
    return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number;
  }
  return number + ""; // always return a string
}

// Unix date to ISO
let unixToIsoDate = (unixDate) => {
  let month = new Date(unixDate * 1000).getUTCDate()
  let day = new Date(unixDate * 1000).getUTCMonth()
  let year = new Date(unixDate * 1000).getUTCFullYear()
  // YYYY-MM-DD: return [year, zeroFill(month,2), zeroFill(day,2)].join('-')
  // m/d/y: return [month, day, year].join('/')
}

##learnjs ##learnjavascript ##javascript ##completehandbook ##handbook

The Complete JavaScript Handbook. JavaScript is one of the most popular… | by Flavio Copes | freeCodeCamp.org | Medium

The Complete JavaScript Handbook

##javascript

A simple guide to JavaScript concurrency in Node.js | TSH.io

A simple guide to JavaScript concurrency in Node.js and a few traps that come with it

##javascript

3 types of function

//Named function 
function multiply() {
    var result = 3 * 4; 
    console.log("3 multiplied by 4 is ", result);
}
multiply()

//anonymous function 
var divided = function() {
    var result = 10 / 2; 
    console.log("10 divided by 2 is ", result)
}
divided(); 

//Immediately invoked functional expressions
(function() {
    var result = 3 + 4; 
    console.log("3 plus 4 is: ", result)
}())

##javascript

JavaScript example #1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function MyExa1() {
            //display output
            var output1 = document.getElementById("output1");
            output1.innerHTML = "Hello PD2<br /> Your age is 100<br />";
        }

        function MyExa2() {
            //get inputs and display outputs
            var uName, uAge; //undefined
            uName = document.getElementById("uName").value;
            uAge = document.getElementById("uAge").value;
            document.getElementById("output2").innerHTML = ("Hello" + uName + "<br /> Your age is " + uAge + "< br />"); 

        }

        function myExa3() {
            //get inputs, calculate and display result
            var num1, num2, total;
            num1 = document.getElementById("num1").value;
            num2 = document.getElementById("num2").value;
            total = Number(num1) + Number(num2); 
            document.getElementById("output3").innerHTML = ("The total is" + total);



        //    num1 = prompt("Enter the first number");
        //    num2 = prompt("Enter the second number");
        //    //total = (num1 - 0) + (num2 - 0);
        //    total = Number(num1) + Number(num2);
        //    documen.write("The total is " + total);
        }



    </script>
</head>
<body>
    <fieldset>
        <button onclick="MyExa1()"> Call the first function</button>
        <p id="output1"></p>
    </fieldset>
    <fieldset>
        <button onclick="MyExa2()"> Call the second function</button>
        <label>Enter Your Name</label>
        <input type="text" id="uName" />
        <br />
        <label>Enter Your Age</label>
        <input type="number" id="uAge" />
        <br />
        <p id="output2"></p>
    </fieldset>

    <fieldset>
        <button onclick="myExa3()"> Call the third function</button>
        <br/> 
        <label>Enter the first number</label>
        <input type="number" id="num1" /> 
        <br/>
        <label>Enter the second number</label>
        <input type="number" id="num2" />
        <br />
        <p id="output3"></p>
    </fieldset>
</body>
</html>



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script>
        //display output 
        //document.write("Hello PD2<br /> Your age is 100<br />")

        //get inputs and display outputs
        //var uName, uAge; //undefined
        //uName = prompt("Enter your name"); //string 
        //uAge = prompt("Enter your age", "18"); //string 
        //document.write("Hello" + uName + "<br />Your age is " + uAge + "< br />");

        //get inputs, calculate and display result 
        var num1, num2, total; 
        num1 = prompt("Enter the first number");
        num2 = prompt("Enter the second number");
        total = (num1 - 0) + (num2 - 0); 
        //or
        total = Number(num1) + Number(num2); 
        documen.write("The total is " + total); 
    </script>
</body>
</html>



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function MyExa1() {
            //display output
            document.write("Hello PD2<br /> Your age is 100<br />")
        }

        function MyExa2() {
            //get inputs and display outputs
            var uName, uAge; //undefined
            uName = prompt("Enter your name"); //string
            uAge = prompt("Enter your age", "18"); //string
            document.write("Hello" + uName + " <br />Your age is " + uAge + "< br />");

        }

        function myExa3() {
            //get inputs, calculate and display result
            var num1, num2, total;
            num1 = prompt("Enter the first number");
            num2 = prompt("Enter the second number");
            //total = (num1 - 0) + (num2 - 0);
            total = Number(num1) + Number(num2);
            document.write("The total is " + total);
        }

            



    </script>
</head>
<body>
    <fieldset>
    <button onclick="MyExa1()"> Call the first function</button>
    <p id="output1"></p>
    </fieldset>
    <fieldset>
        <button onclick="MyExa2()"> Call the second function</button>
        <label>Enter Your Name</label>
        <input type="text" id="uName" />
        <br />
        <label>Enter Your Age</label>
        <input type="number" id="uAge" />
        <br/>
        <p id="output2"></p>
    </fieldset>

    <fieldset>
    <button onclick="myExa3()"> Call the third function</button>
        </fieldset>
</body>
</html>

##javascript

Table Style CSS

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="TableStyle.css" rel="stylesheet" />
</head>
<body>
    <h1>Thank you for submitting the form</h1>
    
    <table>
        <tr>
            <th colspan="2">CONTACT DETAILS</th>
        </tr>
        <tr>
            <th>Location</th>
            <th>Phone</th>
        </tr>
        <tr>
            <td>Sydney</td>
            <td>1111-1111</td>
        </tr>
        <tr>
            <td>Melbourne</td>
            <td>2222-1111</td>
        </tr>
        <tr>
            <td>Sydney</td>
            <td>1111-1111</td>
        </tr>
        <tr>
            <td>Melbourne</td>
            <td>2222-1111</td>
        </tr>
    </table>
</body>
</html>



table{
    width:100%; 
    border-collapse:collapse; 
}

table, th, td{
    border:1px solid black; 
}

td{
    height:50px; 
}

tr:nth-child(odd){
    background-color:#f2f2f2; 
}

##javascript

Web Application Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>form calculator</title>
	<script src="MyScript.js"></script>
</head>

<body>
<h1>Products ordering form</h1>
<p>Simply enter the number of products and item price to find out the total price of your order</p>
<form onsubmit="return calcTotal()" action="#" method="post" id="calcForm">
	
	<p>
		<label for="quantity">Enter number of products wanted:</label>
        	<input name="quantity" id="quantity" />
		
	</p>
	<p>
		<label for="price">Enter price of product wanted:</label>
        	<input name="price" id="price" />
		
	</p>
	<p>
		<input value="Total price" type="submit">  <!--Just to send another page -->
	</p>
</form>
    <div id="message"></div>
</body>
</html>



function calcTotal() {
    //get inputs - qty and item price

    var qty = document.getElementById("quantity").value;
    var price = document.getElementById("price").value;

    //validation - missing inputs, non-digit inputs, negative numbers
     if (qty == "" || price == "") {
        document.getElementById("message").innerHTML = "Missing inputs";
    }

    else if (isNaN(qty) || isNaN(price)) {
        document.getElementById("message").innerHTML = "Digits only";
    }
    else if (qty < 0 || price < 0) {
        document.getElementById("message").innerHTML = "Positive numbers only";
    }
    else {
         //calc - find the total price = qty * item price 
        var totalPrice = qty * price;
        // display the output total price 
        document.getElementById("message").innerHTML = "Total price is " + totalPrice;
    } 
    return false; //prevent form submission 

    //calc - find the total price = qty * item price 

    var totalPrice = qty * price; 

    // display the output total price 

    document.getElementById("message").innerHTML = "Total price is " + totalPrice; 

    return false; //prevent from submission 
}

##javascript

JavaScript example #2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script>
        
        //var arr = ['1', '2', '3', '4', '5']; 

        //for (var i = 0; i < arr.length; i++)
        //{
        //    document.write(arr[i] + '<br/>'); 
        //}

        //while (i < arr.length) {
        //    document.write(arr[i] + "<br/>")
        //i++; 
        //}

        //var x;
        //for (x in arr) {
        //    document.write(arr[x] + "<br/>"); 
        //}



        //for (var i = 0; i < 5; i++) {
        //    var s = Console.ReadLine(); 
        //    s = 


        //}

        //var num = [1, 2, 3, 4, 5];
        //var total = 0; 

        //for (var n in num) {
        //    total += MyNums[n];
        //}
        //document.write(total)
        //document.write(total / arr.length)); 

        var num = [];
        var total = 0; 
        for (var i = 0; i < 5; i++) {
            num[1] = Number(prompt('Enter a number'));
            document.write(num[i] + ' ');
            total += num[i];
        }
        document.write('<br/>Total: ' + total + '<br/>');
        document.write('Average: ' + (total / num.length) + '<br/>'); 

         

    </script>

</body>
</html>

##javascript

JavaScript example #3

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="ValidateForm.js"></script>
<link type="text/css" href="formstyle.css" rel="stylesheet"/>
</head>

<body>

<form onsubmit="return validateAll(this)" action="#" method="post">
	<label id="lblName" for="txtName">Name</label><input id="txtName" type="text" class="valid" onblur="return validateNonEmpty(this, txtName_Help)"/><span id="txtName_Help"></span><br />
	<label id="lblAddress" for="txtAddress">Address</label><input id="txtAddress" type="text" class="valid" onblur="return validateNonEmpty(this, txtAddress_Help)"/><span id="txtAddress_Help"></span><br />
	<label id="lblPCode" for="txtPCode">Postcode</label><input id="txtPCode" type="text" class="valid" onblur="return validatePCode(this, txtPCode_Help)"/><span id="txtPCode_Help"></span><br />
	<label id="lblPhone" for="txtPhone">Phone</label><input id="txtPhone" type="text" class="valid" onblur="return validateNonEmpty(this, txtPhone_Help)" /><span id="txtPhone_Help"></span><br />
	<input name="Submit1" type="submit" value="submit" /><input name="Reset1" type="reset" value="reset"/></form>

</body>

</html>



label{
	display:inline-block;
	width:100px;
}
input.valid
{
	background: #dddddd; 
}
input.invalid  
{
	background: #faa; 
}




function validateNonEmpty(tf, helpText) {
    var value = tf.value;
    if (value) {
        tf.className = "valid";
        helpText.innerHTML = " ";
        return true; //valid - not empty 
    }
    else {
        tf.className = "invalid";
        helpText.innerHTML = "Empty input"; //error msg 
        return false; //invalud = empty 
    }


}

function validateAll(form) {
    var success = true; 
    for (var i = 0; i < form.elements.length; i++) {
        var e = form.elements[i]; 
        if (e.onblur) //if onblur event attribute is not emoty
        {
            //trigger the valdation 
            success = e.onblur() && success; 
        }
    }
    return success; 
}

function validatePCode(tf, helpText) {
    //check if the value is empty 
    var isNotEmpty = validateNonEmpty(tf, helpText); 
    if (isNotEmpty == false) {
        return false; 
    }
    //check if the value contains 4 digits
    var value = tf.value; 
    //var regex = /^\d{4}&/;
   // var regex = new RegExp("ABC"); //CONTAINTS ABC 
   // var regex = /^ABC$/; //exactly ABC
    //var regex = /A[ABC]C/; //CONTAINS EITHER AAC, ABC OR ACC
   // var regex = /^A[ABC]/; //STARTS WITH A FOLLOWED BY EITHER A,B OR C 
    //var regex = /[ABC]A$/; //SECOND LAST CHAR IS EITHER A,B OR C & LAST CHAR IS A 
   // var regex = /A[A-C]C/; //CONTAINS EITHER AAC, ABC, ACC
   // var regex = /^A.C$/; //3 chars that starts with a, followed by any char ends with c 
   // var regex = /CA{3}T/; //CONTAINS CAAAT
    var regex = /CA{2,}T/; //CONTAINTS c, followed by 
    var regex = /CA{2, 5}T/; //


    var is4Digits = regex.test(value);
    if (is4Digits) {
        tf.className = "valid";
        helpText.innerHTML = " ";
        return true; //valid - 4 digits
    }
    else {
        tf.className = "invalid";
        helpText.innerHTML = "Invalid postcode"; //error msg 
        return false; //invalud = empty 
    }

}

##javascript

JavaScript Exercise #1

/* Write a JavaScript program to display the 
current day and time in the following format.
Today is : Tuesday. 
Current time is : 10 PM : 30 : 38 */ 

var today = new Date(); 
var day = today.getDay(); 
var daylist = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
document.getElementById("demo").innerHTML = "Today is : " + daylist[day] + "." 
//console.log("Today is : " + daylist[day] + "."); 

var hour = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds(); 
var prepand = (hour >= 12)? "PM ":" AM "; 
hour = (hour >= 12)? hour - 12: hour; 
if (hour===0 && prepand=== "PM ")
{
if (minute===0 && seconds===0)
{
hour=12; 
prepand=' Noon';
}
else 
{
hour=12; 
prepand= ' PM'; 
} 
}
if (hour===0 && prepand===' AM')
{
if (minutes===0 && second===0)
{
hour=12;
prepand=' Midnight';
}
else 
{
hour=12;
prepand= ' AM';
}
}
//console.log("Current Time: " + hour + prepand + " : " + minutes + " : " + seconds); 
document.getElementById("demo1").innerHTML = "Current Time: " + hour + prepand + " : " + minutes + " : " + seconds

##jspsych ##javascript ##psiturk

sample-jspsych-psiturk-experiment/jspsych.js at master · jspsych/sample-jspsych-psiturk-experiment

   jsPsych.dataAPI = (function() {
        
        var module = {};
        
        // core.dataAsCSV returns a CSV string that contains all of the data
        //      append_data is an option map object that will append values
        //      to every row. for example, if append_data = {"subject": 4},
        //      then a column called subject will be added to the data and
        //      it will always have the value 4.
        module.dataAsCSV = function(append_data) {
            var dataObj = jsPsych.data();
            return JSON2CSV(flattenData(dataObj, append_data));
        };

        module.localSave = function(filename, format, append_data) {
            
            var data_string;
            
            if(format == 'JSON' || format == 'json') {
                data_string = JSON.stringify(flattenData(jsPsych.data(), append_data));
            } else if(format == 'CSV' || format == 'csv') {
                data_string = module.dataAsCSV(append_data);
            } else {
                throw new Error('invalid format specified for jsPsych.dataAPI.localSave');
            }
            
            saveTextToFile(data_string, filename);
        };
        
        module.getTrialsOfType = function(trial_type){
            var data = jsPsych.data();
            
            data = flatten(data);
            
            var trials = [];
            for(var i = 0; i < data.length; i++){
                if(data[i].trial_type == trial_type){
                    trials.push(data[i]);
                }
            }
            
            return trials;
        };
        
        module.displayData = function(format) {
            format = (typeof format === 'undefined') ? "json" : format.toLowerCase();
            if(format != "json" && format != "csv") {
                console.log('Invalid format declared for displayData function. Using json as default.');
                format = "json";
            }
            
            var data_string;
            
            if(format == 'json') {
                data_string = JSON.stringify(flattenData(jsPsych.data()), undefined, 1);
            } else {
                data_string = module.dataAsCSV();
            } 
            
            var display_element = jsPsych.getDisplayElement();
            
            display_element.append($('<pre>', {
                html: data_string
            }));
        }
        
        // private function to save text file on local drive
        function saveTextToFile(textstr, filename) {
            var blobToSave = new Blob([textstr], {
                type: 'text/plain'
            });
            var blobURL = "";
            if (typeof window.webkitURL !== 'undefined') {
                blobURL = window.webkitURL.createObjectURL(blobToSave);
            }
            else {
                blobURL = window.URL.createObjectURL(blobToSave);
            }
            
            var display_element = jsPsych.getDisplayElement();
            
            display_element.append($('<a>', {
                id: 'jspsych-download-as-text-link',
                href: blobURL,
                css: {
                    display: 'none'
                },
                download: filename,
                html: 'download file'
            }));
            $('#jspsych-download-as-text-link')[0].click();
        }
        
        //
        // A few helper functions to handle data format conversion
        //
        function flattenData(data_object, append_data) {

            append_data = (typeof append_data === undefined) ? {} : append_data;

            var trials = [];

            // loop through data_object
            for (var i = 0; i < data_object.length; i++) {
                for (var j = 0; j < data_object[i].length; j++) {
                    var data = $.extend({}, data_object[i][j], append_data);
                    trials.push(data);
                }
            }

            return trials;
        }

##javascript ##jspsych ##psiturk

short data save task.js (via psiturk data save)

	psiTurk.showPage('postquestionnaire.html');
	psiTurk.recordTrialData({'phase':'postquestionnaire', 'status':'begin'});
	
	$("#next").click(function () {
	    record_responses();
	    psiTurk.saveData({
            success: function(){
                psiTurk.computeBonus('compute_bonus', function() { 
                	psiTurk.completeHIT(); // when finished saving compute bonus, then quit
                }); 
            }, 
            error: prompt_resubmit});
	});

##javascript ##n8n

Split Items Of Array For N8N Function

return items[0].json.map(item => {
  return {
    json: item
  }
});

Show React select dropdown with multiple lists mapped to the same drop down

Save snippets that work from anywhere online with our extensions

Comments

More like this

Browse more snippets >>

Embed code snippet