Make drop-down list in react

First we set the default state in the constructor

this.state = { 
  myValue: "default"
}

Then we build the option-elements

let options = ["value1", "value2", "value3"];
for (let i = 0; i < valg.length; i++) {
   options[i] = <option key={options[i]} value={options[i]}>{options[i}</option>);
}

Finally we insert the select-box

<p>MyValue: <select value={this.state.myValue} onChange={(e) => this.setState({myValue: e.target.value})}>{options}</select></p>
Published
Categorized as code, react

Some react sorting-functions

function sorterTallFallende(liste,par) {
	liste.sort(function(a,b) {
		let valA = parseFloat(a);
		let valB = parseFloat(b);
		if(!a[par] || isNaN(parseFloat(a[par]))) return 1;
		if(!b[par] || isNaN(parseFloat(b[par]))) return -1;
		return b[par] - a[par];
	});
}

function sorterTallStigende(liste,par) {
	liste.sort(function(a,b) {
		let valA = parseFloat(a);
		let valB = parseFloat(b);
		if(!a[par] || isNaN(parseFloat(a[par]))) return 1;
		if(!b[par] || isNaN(parseFloat(b[par]))) return -1;
		return a[par] - b[par];
	});
}

	
function sorterTekstAlfabetisk(liste,par) {
	liste.sort(function(a,b) {
		if(!a[par]) return 1;
		if(!b[par]) return -1;
		return a[par] > b[par] ? 1 : -1;
	});
}
	
function sorterTekstMotsattAlfabetisk(liste,par) {
	liste.sort(function(a,b) {
		if(!a[par]) return 1;
		if(!b[par]) return -1;
		return a[par] < b[par] ? 1 : -1;
	});
}
	
function sorterHøyMiddelsLav(liste,par) {
	liste.sort(function(a,b) {
		let valA = 0;
		let valB = 0;
		if(a[par] == "Lav") {
			valA = 1;
		} else if (a[par] == "Middels") {
			valA = 2;
		} else if (a[par] == "Høy") {
			valA = 3;
		}
		if(b[par] == "Lav") {
			valB = 1;
		} else if (b[par] == "Middels") {
			valB = 2;
		} else if (b[par] == "Høy") {
			valB = 3;
		}
		return valB - valA;
	});
}

function sorterGodMiddelsDårlig(liste,par) {
	liste.sort(function(a,b) {
		let valA = 0;
		let valB = 0;
		if(a[par] == "Dårlig") {
			valA = 1;
		} else if (a[par] == "Middels") {
			valA = 2;
		} else if (a[par] == "God") {
			valA = 3;
		}
		if(b[par] == "Dårlig") {
			valB = 1;
		} else if (b[par] == "Middels") {
			valB = 2;
		} else if (b[par] == "God") {
			valB = 3;
		}
		return valB - valA;
	});
}
	

function sorterArraystørrelse(liste,par) {
	liste.sort(function(a,b) {
		return a[par].length < b[par].length ? 1 : -1;
	});
}

Published
Categorized as code, react

Read and write json in php

Read json-file:

$data = file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/myfile.json");
$myArray = json_decode($data, true);

Write array to a json-file:

$jsonArray = json_encode($myArray);
file_put_contents("/myfile.json", $jsonArray);

To return json when php-file is called, simply:

echo json_encode($myArray); 

Published
Categorized as php

React fetch file with params

The URLSearchParams interface is handy when building a request.

let searchParams = new URLSearchParams(window.location.search);

Then do whatever with the parameters and do the fetch, in this case a php-file returning json-data.

let a = "https://someserver.com/somefile.php";
if (!searchParams.entries().next().done) {  
   a += "?" + searchParams;        
}
       
fetch(a)            
.then( response => { return response.json() })            
.then( json => {  
   this.setState({
      myData:json
   });
});

Published
Categorized as react

Simple workflow with jsx/babel

I currently use a primitive react/jsx-workflow based on standalone babel and manually copying code from test to production.

My sites all have separate test and production domains. I use client side react/jsx, and php for everything server side.

At the test-sites I work with jsx, this code is compilated on page load with standalone babel. To make this work you first have to include babel.min.js and then the relevant jsx-script with type=”text/babel”.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" src="/myscripts/myfile.jsx"></script>

When the code is ready for production I manually copy-paste the jsx into the online compilator at https://babeljs.io/repl. And then copy the result into the relevant myfile.js at the production environment.