A component render can return only one element, so if you want more complicated HTML output from your component’s render, it needs to be returned in a single div. In other words, every component can return only a single div. This applies to ReactDOM.render also. So if I want to render a Movie component three … Continue reading React: A component render can return only one element!
Month: May 2018
React: How to call a parent function from a child function and/or pass data to the parent function
In a continuation of the theme of how to pass information around in react, this article details how to call a parent function from a child function. This previous article details how to pass state from parent to child: React: How to pass state information from parent to child Allowing a child function to call … Continue reading React: How to call a parent function from a child function and/or pass data to the parent function
React: How to pass state information from parent to child
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
MySQL: How to run multiple queries in one
Let’s say we have a couple of simple SQL queries, one of which counts the total number of job hours: select sum(Hours) as totalCount from job_details where Job_ID = 42504; and another query that sums the total number of job hours that have been completed: select sum(Hours) as completedCount from job_details where Job_ID = 42504 … Continue reading MySQL: How to run multiple queries in one
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
Atom: How to enable and style editor scrollbars
To enable scrollbars in the Atom code editor, you will need to open and edit Atom’s styles.less file. This can be done by clicking File –> Stylesheet… For example: Step 1: Open the Atom styles.less file for editing Step 2: Paste the following webkit-scrollbar code Here is the code that can be pasted: .scrollbars-visible-always … Continue reading Atom: How to enable and style editor scrollbars
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( )