useState props

const [activeIndex, setActiveIndex] = useState(null);

Whenever you call useState in React, you get back two elements. The first value will always be its most recent state and the second value is the value you want to set state to.

The const above is called array destructuring and in our particular instance, it’s used to give us direct access to the first element (state) and second element (set state) of useState.

It shortcuts having to do the below:

const colors = ['red', 'green'];
const redColor = colors[0];
const greenColor = colors[1];

And you can shortcut the above by simply doing:

const [redColor, greenColor] = colors;

Which is assigning the first Element in colors, to the variable redColor and the second element in colors, to the variable greenColor.

There are three steps to setting state in Class Components and in Functional Components.

Class Component

// Initialize in the constructor
state = { activeIndex: 0 };

// Reference
this.state.activeIndex;

// Update
this.setState({ activeIndex: 5 });

Functional Component

// Initialize
const [activeIndex, setActiveIndex] = useState(0);

// Reference
activeIndex;

// Update
setActiveIndex(5);
 

Redux Reducers

In my current self directed learning path about React, I’m wrapping my head around Redux and how it’s used to manage state.

In C# we have an Aggregate() method that takes in a collection and spits out a single value. For instance:

IEnumerable<int ints = new List<int> { 4, 8, 12, 16 };
int result = ints.Aggregate((sum, val) => sum + val);

Can you guess what the value of result is? If you guessed (or knew) 40, you’d be correct.

  • First iteration: 4 + 8, returns 12
  • Second iteration: 12 + 12 returns 24
  • Third iteration: 24 + 16 returns the final 40

With regard to state and where Redux comes in, reducers take in an initial state, and an action, to determine the new state. Redux helps us streamline keeping track of state, so that it’s consistent across our apps. The below code snippet is from a reducer I created called alert.js. The import on the first line is simply importing the SET_ALERT and REMOVE_ALERT constants from my types.js file.

I create another constant and set my initialState equal to an empty array. The reducer function takes two params, current state & action and returns a new state based on action.type and action.payload.

import { SET_ALERT, REMOVE_ALERT } from '../actions/types';

const initialState = [];

export default function (state = initialState, action) {
  const { type, payload } = action;
  switch (type) {
    case SET_ALERT:
      return [...state, payload];
    case REMOVE_ALERT:
      return state.filter((alert) => alert.id !== payload);
    default:
      return state;
  }
}

An action is an object that contains two key/value pairs, type & payload. In Redux Reducers, action.type is required and action.payload is optional.

A core tenet of Redux is that it should never mutate state, so you see the use of the spread operator ...state which makes state immutable.

 

Stateful components in React

I haven’t dove into state in functional components yet. But I am learning about state in class components.

When building a class in React, it’s helpful to extend (in C# we call this an override (inheritance)) React.Component. In order to pass arguments (props) to this class though, you must pass the props into the class constructor as well as into the parent (React.Component). That’s accomplished by using the super keyword.

The nice thing about state in a React class, is that it’s asynchronous out of the box. We can set off a task in the constructor and when you have a callback function that’s tied to this.setState, React will automatically recall the render method and update the state of that component. See my example below:

Basic react state

 

How To Start with src and tests Folders in your Solution File in Visual Studio 2019

Organizing your code into src and tests folders on GitHub seems to be getting more and more popular. However, in Visual Studio 2019, it’s not very easy to accomplish. Here is how I do it.

Firstly, let me show you the final outcome:

To get there requires some Command line. First open a Command window and change to your local root folder for your application. In my case it’s C:\Code\NameOfCoolApp.

Once in the root folder of your application, type this in:

dotnet new sln

You should get something similar to The template “Solution File” was created successfully.

Next, we’re going to stub out one of your projects in the solution, so use whatever your naming convention is here. In my case, we’re going to stub out the Domain project. So from that same command window, type:

dotnet new classlib -o src/NameOfCoolApp.Domain

You should then see something like The template “Class Library” was created successfully and ending with Restore succeeded.

Next, I add a stubbed Unit Test:

dotnet new mstest -o tests/Domain.UnitTests

Following the successful message, we’re then going to add the above two items to the Solution by starting with:

dotnet sln add src/NameOfCoolApp.Domain

And finally:

dotnet sln add tests/Domain.UnitTests

From here you should be able to open the Solution file with VS2019 and be good to move on with the rest of your project within Visual Studio.

 

Great List of Public APIs

Public-apis.io is one of the greatest lists of public APIs that I’ve come across.

 

.NET Core 3.1 Missing From Target framework in VS2019 [FIXED]

I cloned a repository that was targeting .NET Core 3.1. Trying to run it in VS 2019 ended with this error:

The current .NET SDK does not support targeting .NET Core 2.1. Either target .NET Core 2.0 or lower, or use a version of the .NET SDK that supports .NET Core 2.1.

I looked at the properties of the project and I couldn’t see anything higher than .NET Core 2.2 in my Target frameworks list.

I spent more hours that I care to admit to here. I checked that .NET Core 3.1 both x64 and x32 were installed. They were.

I checked that C:\Program Files\dotnet was in my Path. It was.

It turned out that I had a global.json file in my root C:\Code folder, where I have all my local code projects, that was limiting my targeting of any child folders to 2.2.

I removed that global.json file and voila! I can now see .NET Core 3.1.

 

This remains one of my favorite answers..

…to the question, “What counts as experience?”

https://serverfault.com/questions/169620/what-counts-as-experience/169627#169627

 

RadControls ComboBox

When doing any kind of validation on your aspx pages, you must go back and set the CausesValidation property of most of your controls to “false”.  My RadComboBox wasn’t firing any postbacks until I did that.  I also had to set the same property on all my RadTabStrips because by default, they want to validate when you click on other tabs.

 

Netscape Navigator….wo0t!

My online bud Jeremiah and fellow digger, has landed a paying gig as a Netscape Navigator!  Congratulations and kudos to him.  Say what you will about getting paid to post but you should already know my feelings about it.  I know as a fellow tech geek that Jeremiah writes well and loves technology, especially Linux, and that this paying gig will allow him to feed his addiction to tech.  Way to go bro!

 

Would you eat cloned meat??

An FDA risk assessment that is expected to declare meat and milk derived from cloned animals safe for the food supply is currently being reviewed by the government, and is due to be released by the end of the year.

If these documents are finalized, cloned animal products will become part of the food supply, without the requirement for such foods to carry special labeling. And this could result in a backlash of absence claims, with ‘clone-free’ products starting to appear on supermarket shelves.

However, the move has inspired fierce criticism from consumer advocacy groups, which claim that there is insufficient science to guarantee the safety of products from cloned animals…

read more | digg story