teleren/devto huggingface dataset:
Pass props to a component rendered by React Router V4
Tags: react, javascript, reactrouter
Published: 2018-02-06 23:11:21

---
title: "Pass props to a component rendered by React Router V4"
description: "In this post you'll learn how to pass props to components being rendered by React Router."
tags: "react, javascript, react-router"
cover_image: "https://tylermcginnis.com/static/296983b9310f14a90e8f3fc1332972b9-b8633.png"
canonical_url: "https://tylermcginnis.com/react-router-pass-props-to-components/"
published: "true"
---

This was originally published at [TylerMcGinnis.com](https://tylermcginnis.com/react-router-pass-props-to-components/) and is part of their [React Router](https://tylermcginnis.com/courses/react-router/) course.

***

### Video

{% youtube By7vJuSPaYo %}

React Router uses a declarative, component based approach to routing. What that means is when you want to create a new route, you render a `Route` component. If you're familiar with React Router you know that to do that, you pass `Route` a `path` and a `component` to render when the app's location matches that `path`.

```js
<Route path='/dashboard' component={Dashboard} />
```

Now, what if we also wanted to pass `Dashboard` a prop? There's a few different ways to solve this problem but only one right way. The first idea you might have is to just pass it as a prop on `Route`.

```js
<Route
  path='/dashboard'
  component={Dashboard}
  isAuthed={true}
/>
```

Unfortunately, this won't work. React Router won't forward that prop onto the component. Instead, it will just ignore it.

The next idea you might have, and a pattern I've seen a few places is to pass `component` an inline function that creates the element.

```js
<Route
  path='/dashboard'
  component={() => <Dashboard isAuthed={true} />}
/>
```

Though technically this will work, it's not the best solution. The reason for this is because of performance. According to the offical docs...

> "When you use the component props, the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component attribute, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component."

So if you're not supposed to pass a function to `component`, what's the solution? Turns out the React Router team predicted this problem and gave us a handy solution. Instead of using `component`, use the `render` prop. `render` accepts a functional component and that function won't get unnecessarily remounted like with `component`. That function will also receive all the same props that `component` would receive. So you can take those and pass those along to the rendred component.

```js
<Route
  path='/dashboard'
  render={(props) => <Dashboard {...props} isAuthed={true} />}
/>
```

So to recap, if you need to pass a prop to a component being rendered by React Router, instead of using `Route`s `component` prop, use its `render` prop passing it an inline function then pass along the arguments to the element you're creating.
Explain Haskell like I'm five
Tags: haskell, explainlikeimfive
Published: 2018-02-06 22:08:03

---
title: Explain Haskell like I'm five
published: true 
description: I'm a newbie in functional programming, and learning haskell. Can you guys help me? 
tags: haskell, explainlikeimfive, 
---

I started learning functional programming using python, but I want to level up and I started learning Haskell. 

I'm very new in all of this so if you guys can help me explaining it like I'm five, handing me some resources and such, it would be great. **Thanks in advance!**
C# Create new T() 
Tags: csharp, generics, dotnet
Published: 2018-02-06 20:46:47

---
title: C# Create new T() 
published: true
description: How to create a new instance of generic T parameter using new() constraint.
tags: Csharp,Generics,dotnet
---


For a long time now whenever i had to create a new instance of a generic type parameter i was using Activator.CreateInstace(Type) method
https://msdn.microsoft.com/en-us/library/wccyzw83.aspx

Example:

```csharp
public class Dog : ISound
{
    public string Sound { get; set; } = "woof woof";
}

public class Animal<T> where T : ISound
{
    public ISound GetInstance()
    {
        return (ISound)Activator.CreateInstance(typeof(T));
    }
}
```

Recently i stumbled upon the **new constraint keyword** from the MS docs (somehow i missed that 😞)
https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/keywords/new-constraint
and the Generic class of Animal above can be rewritten as following:


```csharp
public class Animal<T> where T : ISound, new()
{
    public T GetInstance()
    {
        return new T();
    }
}
```

and can be used:
```csharp
var animal = new Animal<Dog>();
var dog = animal.GetInstance();
var sound = dog.Sound; //woof woof
```

**Important**: When you use the `new()` constraint with other constraints, it must be specified last.


This post was written with love ❤️
How to send JSON response to AWS Alexa skill from JAVA
Tags: java, alexa, aws
Published: 2018-02-06 20:33:10

---
title: How to send JSON response to AWS Alexa skill from JAVA
published: true
description: How to send JSON response to AWS Alexa skill from JAVA
tags: JAVA, Alexa, AWS
---

```
JSONObject outputSpeechContent = new JSONObject();
outputSpeechContent.put("type", "PlainText");
outputSpeechContent.put("text", engineResponse.getText());
JSONObject outputSpeech = new JSONObject();
outputSpeech.put("outputSpeech", outputSpeechContent);

JSONObject resObj = new JSONObject();
resObj.put("version", "1.01");
resObj.put("response", outputSpeech);
response.setStatusCode(200);
Linked Lists — BaseCS Video Series
Tags: computerscience, basecs
Published: 2018-02-06 20:21:39

---
title: Linked Lists — BaseCS Video Series
published: true
description: The first episode of the BaseCS Video Series with Vaidehi Joshi. All about linked lists!
tags: computerscience, BaseCS
series: BaseCS Video
---

You might have heard about linked lists, or you might think that you're _supposed_ to know about them. Maybe you do know a little bit about them, but don't know why you should care or why they matter. Either way, I want to tell you about why they're so cool.

For much more on linked lists, check out the articles that accompany the video series:

{% link https://dev.to/vaidehijoshi/whats-a-linked-list-anyway %}

{% link https://dev.to/vaidehijoshi/whats-a-linked-list-anyway-part-2 %}

Leave questions and comments below!

[![SparkPost Logo](https://thepracticaldev.s3.amazonaws.com/i/v5svhunrn8s5jpjiumlk.png)](https://sparkpost.com/)

### This video series is sponsored by [SparkPost](https://www.sparkpost.com/). There's never been a better way for developers to send email.
Programmatically check table exist in AWS Dynamo DB from Lambda function
Tags: serverless, java
Published: 2018-02-06 20:11:21

---
title: Programmatically check table exist in AWS Dynamo DB from Lambda function
published: true
description: Programmatically check table exist in AWS Dynamo DB from Lambda function
tags: Serverless, JAVA
---

```
public boolean isTableExist(String tableName) {
		try {
		    TableDescription tableDescription = dynamoDB.getTable(tableName).describe();
			System.out.println('Table description: ' + tableDescription.getTableStatus());

			return true;
		} catch (com.amazonaws.services.dynamodbv2.model.ResourceNotFoundException rnfe) {
			System.out.println("Table does not exist");
		}
		return false;

	}

```

Follow me in Twitter
https://twitter.com/muthupandian_in
Programmatically create AWS DynamoDB table from AWS Lambda function
Tags: serverless
Published: 2018-02-06 20:09:02

---
title: Programmatically create AWS DynamoDB table from AWS Lambda function
published: true
description: Programmatically create AWS DynamoDB table from AWS Lambda function
tags: Serverless
---



```
public void createTable(String tableName, long readCapacityUnits, long writeCapacityUnits, String partitionKeyName, String partitionKeyType, String sortKeyName, String sortKeyType) {
		try {
			System.out.println("Creating table " + tableName);

			List<KeySchemaElement> keySchema = new ArrayList<KeySchemaElement>();
			keySchema.add(new KeySchemaElement().withAttributeName(partitionKeyName).withKeyType(KeyType.HASH)); // Partition
																													// key
			List<AttributeDefinition> attributeDefinitions = new ArrayList<AttributeDefinition>();
			attributeDefinitions.add(new AttributeDefinition().withAttributeName(partitionKeyName).withAttributeType(partitionKeyType));

			if (sortKeyName != null) {
				keySchema.add(new KeySchemaElement().withAttributeName(sortKeyName).withKeyType(KeyType.RANGE)); // Sort
																													// key
				attributeDefinitions.add(new AttributeDefinition().withAttributeName(sortKeyName).withAttributeType(sortKeyType));
			}

			Table table = dynamoDB.createTable(tableName, keySchema, attributeDefinitions, new ProvisionedThroughput().withReadCapacityUnits(readCapacityUnits).withWriteCapacityUnits(writeCapacityUnits));
			System.out.println("Waiting for " + tableName + " to be created...this may take a while...");
			table.waitForActive();

		} catch (Exception e) {
			System.err.println("Failed to create table " + tableName);
			e.printStackTrace(System.err);
		}
	}
Explain C Pointers Like I'm Five
Tags: explainlikeimfive
Published: 2018-02-06 19:48:24

---
title: "Explain C Pointers Like I'm Five"
published: true
tags: explainlikeimfive
cover_image: https://thepracticaldev.s3.amazonaws.com/i/cbxl9xgl8yde0cvnkk7o.jpg
---
Why does ISO/IEC charge for their standards?
Tags: help, iso, standards
Published: 2018-02-06 19:46:37

---
title: Why does ISO/IEC charge for their standards?
published: true
description: Hmmm?
tags: help, iso, standards
---

Why does ISO/IEC sell their standards? I know people have to get paid for their work but then why doesn't ECMA or the IETF also charge? Being a standards body, I would have thought that would want to spread the information as much as possible, but even when you download one of their free standards there are big warnings to not distribute the documents.

Why is this?
Should I go NoSQL or SQL for my specific app case? Or both? 
Tags: discuss, nosql, sql, ios
Published: 2018-02-06 01:55:40

---
title: Should I go NoSQL or SQL for my specific app case? Or both? 
published: true
tags: discuss, nosql, sql, ios
---

Hi everyone!

I am designing a movie-recommendation **iOS** app based on Movie Awards. It would only show movies that were nominated to awards, and the user would be able to filter data by award (Oscars, Golden Globe, etc), by year, by categories, etc.

That would require a database to store all the award and movie data. The movie data will be retrieved from The [Movie Database API](https://www.themoviedb.org/documentation/api), but I still need to store some of it (TMDB id, name, year, poster, etc) to create the relationship of each movie with the specific awards it's in.

Therefore I need an "awards" database. It should store award information, dates, categories, nominees, winners, etc. 

I was thinking of going the easy way (for me!) and use **SQLite** for that. It is a very predictable database, and will be updated a few times a year only. 

But then I got lured into the **NoSQL** discussion.

As I am planning to, on a v2.0, allow users to save movies in a watchlist, or mark as watched, I though this would be a great use for NoSQL?

Please help! What would you do? Use both? focus on SQL or NoSQL only?

Thanks!!
Best, 
Daniel
One life saving Javascript Tip
Tags: javascript, tip, performance, discuss
Published: 2018-02-06 19:03:56

---
title: One life saving Javascript Tip
published: true
description: One of my favourite tip to improve code readability
tags: Javascript, tip, performance, discussion
---



### Always Exit Early !



```javascript
function mostComplicatedFunction(data) {



    if (!data) {
      return; // << Always exit early whenever you can!
    }



    // Bang Bang!

    var {words, ii, position, word, current, sentence} = data;

    /**
     * @default 100
     */
    num_words = num_words || 100;

    words = [LoremIpsum.WORDS[0], LoremIpsum.WORDS[1]];
    num_words -= 2;

    for (ii = 0; ii < num_words; ii++) {
    position = Math.floor(Math.random() * LoremIpsum.WORDS.length);
    word = LoremIpsum.WORDS[position];

    if (ii > 0 && words[ii - 1] === word) {
        ii -= 1;
    } else {
        words[ii] = word;
    }
    }

    sentences = [];
    current = 0;

    while (num_words > 0) {
    sentence_length = this.getRandomSentenceLength();

    if (num_words - sentence_length < 4) {
        sentence_length = num_words;
    }

    num_words -= sentence_length;

    sentence = [];

    for (ii = current; ii < current + sentence_length; ii++) {
        sentence.push(words[ii]);
    }

    sentence = this.punctuate(sentence);
    current += sentence_length;
    sentences.push(sentence.join(" "));
    }

    return sentences.join(" ");

}
```
What language features/concepts do insiders of the language love and outsiders hate?
Tags: discuss
Published: 2018-02-06 18:53:21

---
title: What language features/concepts do insiders of the language love and outsiders hate?
published: true
description: 
tags: discuss
---

People tend to love programming languages for the very reason others run away with fear. Whether it's out of familiarity, learning curve or other, what are language features that insiders love and outsiders hate?
Developing Games with React, Redux, and SVG - Part 1
Tags: react, redux, svg, videogame
Published: 2018-02-06 17:28:50

---
title: Developing Games with React, Redux, and SVG - Part 1
published: true
description: Learn how to make React and Redux control a bunch of SVG elements to create a game.
tags: #reactjs #redux #svg #videogame
canonical_url: https://auth0.com/blog/developing-games-with-react-redux-and-svg-part-1/
---

In this new series, you will learn how to make React and Redux control a bunch of SVG elements to create a game. The knowledge acquired throughout this series will also allow you to create other types of animations that are orchestrated by React and Redux, not only games. 

[Read on 🕹👾](https://auth0.com/blog/developing-games-with-react-redux-and-svg-part-1/?utm_source=dev&utm_medium=sc&utm_campaign=react_game)

![Developing Games with React, Redux, and SVG - Part 1](https://thepracticaldev.s3.amazonaws.com/i/5clwf8munj4x58ztz4ki.png)
What do you do when StackOverflow and the internet fails you?
Tags: discuss
Published: 2018-02-06 14:59:16

---
title: What do you do when StackOverflow and the internet fails you?
published: true
tags: discuss
---

You're happily coding and hit a small technical snag. You focus on your search box and trawl the internet looking for answers. StackOverflow et al have some related things, but not exactly. You spend a few more hours using that knowledge, looking for new solutions. But alas, it's not working. Rinse, repeat: more net crawling.

At some point you hit a dead end. There's no more relevant information online. You've gone through the docs, the examples, the issue systems, and the Q&A sites, but nothing has helped.

You may even up the ante and start asking questions. And should the comments on StackOverflow not completely demotivate you, you clarify the question, cross-reference and continue to hope somebody can help.

Alas, no answers appear.

What do you do now?
Is a good idea to start a startup while you work full-time?
Tags: discuss, entrepreneur, startup
Published: 2018-02-06 14:04:17

---
title: Is a good idea to start a startup while you work full-time?
published: true
description: Is a good idea to start a startup while you work full-time? 
tags: #discuss, #entrepreneur, #startups
---

I've been thinking about this for a long time. I know that the process of creating a startup is difficult itself, and I also know that it is more difficult if you are a full time employee (*I am currently in this phase*).It is a complicated situation when you try to create a new business while you are a full-time employee, for some reason, such as time; If you do not dedicate time to your project, you will not be able to achieve your objectives or it will take you too long to achieve it.

So ... Here's my question: I'm currently a full-time employee, but I also have a personal project that I'm working on. I have read many articles by people who say why it is bad and why not, but __I would like to have a more human perspective on what you think about this, and if you are / were in the same situation.__
Towards a JavaScript API Specification
Tags: javascript, api, specification
Published: 2018-02-06 13:40:28

---
title: Towards a JavaScript API Specification
published: true
description: It's time to define a specification for JavaScript APIs
tags: javascript, api, specification
cover_image: https://thepracticaldev.s3.amazonaws.com/i/p89adtw5wcr2ltu5wzjc.png
---

In the past few years [OpenAPI](https://github.com/OAI/OpenAPI-Specification) (formerly Swagger) has become a de-facto standard for describing REST APIs, while a format for non-REST APIs is still to be defined.

This is particularly challenging in dynamically typed languages like JavaScript, which despite its popularity still has no consistent way to describe an API for a consumer.

Various formats do exist though and each project/vendor seems to have their own way of describing their interface:

- The JSON output from the [JSDoc3](https://github.com/jsdoc3/jsdoc) project comes a long way, but it's primary focus is to generate documentation, not describe the annotated API.
- [documentationjs](https://github.com/documentationjs/documentation) also provides a very good JSON structure, but again the project is more focused on generating documentation.
- [esdoc](https://github.com/esdoc/esdoc) has a very good plugin architecture, outputting a structured JSON should be possible.
- NodeJS has a JSON representation of each one of their modules, e.g. [net.html](https://nodejs.org/api/net.html) and [net.json](https://nodejs.org/api/net.json)

## Goal

What I'm interested in is to define a standard for describing JavaScript APIs. By defining a machine-readable format of the consumable API, additional tools can be created based on the provided specification:

- Generate API reference documentation
- Generate typings (TypeScript, Flow etc.)
- Visualize the API to provide an overview
- Assist in API governance by comparing versions and detecting added/deprecated/removed endpoints

Much like the Open API specification, I have started with a [rough draft of such a format](https://github.com/miralemd/js-api-spec), complemented with a JSON-schema and a [tool which can transform JSDoc annotated code](https://github.com/miralemd/jsdoc2spec) to said specification.

Do you think a specification for JavaScript APIs could be useful? Unnecessary? Do you have any feedback on the current draft? Let me know what you think.
Code review on YouTube API project
Tags: discuss, react
Published: 2018-02-06 13:26:04

---
title: Code review on YouTube API project
published: true
description: 
tags: discuss, react
---

I just finished updating my projects layout and added an appbar from material-ui. Any feedback functional or stylistic will be gladly appreciated. Would like ideas for a future update. 
https://dancehall-lite.firebaseapp.com
Oh, hey there.
Tags: introductions
Published: 2018-02-06 11:24:40

---
title: Oh, hey there.
published: true
description: I've had this account for quite a while now. Let's do something with it.
tags: 
  - introductions
---

I'm a professional/hobbyist web developer based in Jakarta, Indonesia.

I started getting into web development when I self-learned HTML and CSS back in high school. I currently work at a well-known player in the Indonesian fintech industry.

I've recently been writing a lot of programming-related posts on my [personal site](https://resir014.xyz/), and I've decided to experiment in syndicating my posts here. Expect posts about front-end development, especially the world of JavaScript, TypeScript, React, and the like.

I'm also on Twitter [(@resir014)](https://twitter.com/resir014) and [Mastodon](https://icosahedron.website/@resir014), if you're into any of them.

Have a nice day!
Bash functions
Tags: linux, bash, beginners
Published: 2018-02-06 07:52:02

---
title: Bash functions
published: true
description: 
tags: #linux #bash #beginners
---

Before we talk about bash functions, let’s discuss this situation. When writing bash scripts, you’ll find yourself that you are using the same code in multiple places.

If you get tired of writing the same lines of code again and again in your bash script, it would be nice to write the block of code once and call it anywhere in your bash script.

The bash shell allows you to do just that with Functions.

Bash functions are blocks of code that you can reuse them anywhere in your code. Anytime you want to use this block of code in your script, you simply type the function name given to it.

We are going to talk about how to create your own bash functions and how to use them in shell scripts.

1 Creating a function
2 Using Functions
3 Using the return Command
4 Using Function Output
5 Passing Parameters
6 Processing Variables in Bash Functions
6.1 Global Variables
6.2 Local Variables
7 Passing Arrays As Parameters
8 Recursive Function
9 Creating Libraries
10 Use Bash Functions From Command Line

https://likegeeks.com/bash-functions/
Would you hire a foreign developer without CS degree?
Tags: career, discuss
Published: 2018-02-06 03:31:50

---
title: Would you hire a foreign developer without CS degree?
published: true
tags: #career #discuss
---

![](https://media.giphy.com/media/aqKk1PGZTQnHa/giphy.gif)

Probably, you just said "Nah" to the title, yet I'm glad you're nevertheless reading this post.

## TL;DR
#### What would you do if you were a foreign developer without CS degree, who wants to get a job in other countries.

I'd really appreciate if you could share your thoughts and advice, or your stories and the reality in your country.

Here is my list of api to get a job abroad(get a work-permit/visa).

## Options
- GET /Master of CS
- GET /Online CS degree
- POST /internship_application
- GET localhost:Tokyo/jobs?purpose=to_earn_more_dev_experience
- GET localhost:Tokyo/jobs?has_branch_abroad=true&visa_sponsored=true
- OPTIONS /bootcamp_and_look_for_job
- DELETE /developer_careers_and_go_for_saxophone_player

Please tell me if you have any ideas for better apis!

### Master of CS
It will definitely make it easier to get a visa.
But getting CS degree especially in the US costs a lot, not everyone can afford it and I'm not sure if it's worth taking a couple of years.
 
### Online CS degree
Some people get online certifications or think of it, such as MOOC, Coursera, Udacity or UOP.
They are usually much cheaper and shorter to get than getting a degree offline although I'm not sure if you can use it as valid certificate to get a visa.


UOP [University Of the People](https://www.uopeople.edu/)

### Internship
Anyway move abroad first and apply for internships or jobs, hopefully to get a job. very optimistic.

### Work in Tokyo.
I feel like this option is too realistic for me to go with.

So I wanted to know if there is any possibility for foreign developers without CS degree to work in other countries.

`$ ping any_possibility_for_foreigners
Pinging any_possibilty_for_foreigners without CS degree:
Reply from US: Destination net unreachable?
Reply from Canada: Destination net unreachable?
Reply from Australia: Destination net unreachable?
...
...
...
`

### Thank you for reading !!
I'm really waiting for your comments, advice, tips or the reality in your country !!

Peace✌︎