In a react script, to pass state information from a parent component to a child component, the state information needs to be passed as a prop. For example: numturns={this.state.number_of_turns} Now, “numturns” can be used as a prop in the child. For example, inside the child handleclick function: console.log(“Child communication, number of turns from parent: “, … Continue reading React: How to pass state information from parent to child
JavaScript
React: Using .bind(this) on parent and child components
In a react script, for every function in both the parent and child components we must have this magic line using .bind(this)in the constructors: this.nameOfFunction = this.nameOfFunction.bind(this); For example: // Parent with a incrementNumberTurns() function: this.incrementNumberTurns = this.incrementNumberTurns.bind(this); // Child with a handleClick() function: this.handleClick = this.handleClick.bind(this) Here is an example from the parent component … Continue reading React: Using .bind(this) on parent and child components
jQuery: How to scroll to a div
When you first land on a page, it is possible to have the page scroll down to some remote div further down the page, using a little bit of jQuery. For example, if the remote div is called “remoteDiv”, this jQuery will automatically scroll down to the div when the page loads: $(“.remoteDiv”).ready(function() { $(‘html,body’).animate({ … Continue reading jQuery: How to scroll to a div
HTML & CSS: How to change text color based on background color
Let’s say we have a progress bar with some text in it and the background is a light color. We want the font to be dark enough to contrast with the light background. Then as the progress bar or meter fills up with a darker color, we want the font color to adjust (lighter font … Continue reading HTML & CSS: How to change text color based on background color
JavaScript: How to get N largest numbers in an array using sort( ) and slice( )
Where this previous article explained how to get the max number in an numeric array: JavaScript: How to get the largest number in an array using Math.max( ) There are times where we want more than just the single highest value in an array. What if we want the top 2, 3 or 5 numbers … Continue reading JavaScript: How to get N largest numbers in an array using sort( ) and slice( )
JavaScript: How to get the largest number in an array using Math.max( )
If we want the largest one number in an array, we can get that using JavaScript’s Math.max() function. Simply place the array of values (without square brackets) into the parenthesis of the function. Like so: console.log(Math.max(1, -5, 2, 8, 17, 0, -2)); Which yields: 17 A list of all negative numbers: console.log(Math.max(-11, -8, -2)); Which … Continue reading JavaScript: How to get the largest number in an array using Math.max( )
JavaScript: How to get a random index from an array
Let’s say I have an array of 100 integers that looks like this: let hundred = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, … Continue reading JavaScript: How to get a random index from an array
JavaScript: How to compare dates
For an explanation of how to get an ISO date-time string, see this previous article: JavaScript: How to create a formatted date time string Let’s say we have two ISO date-time strings that we pulled from a MySQL database and we want to programmatically compare them to see which date is newer. Let’s set them … Continue reading JavaScript: How to compare dates
JavaScript: How to add and subtract days from ISO date-time strings
For an explanation of what an ISO date-time string is, see this previous article: JavaScript: How to create a formatted date time string Now let’s say we get today’s date and we want to also get dates for one week ago and one week in the future. We can get today’s date in the form … Continue reading JavaScript: How to add and subtract days from ISO date-time strings
jQuery: How to use jQuery to reset select menus and text fields
jQuery is a powerful tool in that it allows us to select any DOM element and perform some action on it. In this example, I will show how to use jQuery to select IDs from select menus and a text field and reset them when clicking a div. Example 1 – Resetting selected This … Continue reading jQuery: How to use jQuery to reset select menus and text fields