teleren/devto huggingface dataset:
Updating Arrays in State
Tags: webdev, beginners, tutorial, react
Published: 2022-09-07 06:33:41


## Updating Arrays in State

Just like Objects, State is also designed to hold **Arrays** in JavaScript. However, we cannot change the state of arrays directly as we did with the other JavaScript values, like numbers, strings, and booleans.
Arrays are a kind of objects hence, just like objects, arrays **should not be reassigned or mutated** using methods such as push(), pop(), etc.

To update an array in React we must do either of the following:

* **Create a new Array**

* **Create a copy of the existing Array**

Followed by setting the state of the new Array.

## Adding and Replacing elements in an Array

The **push()** and **splice()** methods will **mutate the array**.
Instead, we use the spread syntax and map operator respectively. The spread operator allows us to create a new array with the existing elements and new items at the end.
The map operator will create a new array from the original array which will allow us to set the state to the resulting new array.

We will explain the above logic by creating a shopping list that adds and replaces elements.
Firstly we import the useState hook.

Secondly, we will define a variable named “nextID” that will store the next ID of the current item

![](https://cdn-images-1.medium.com/max/2000/0*ilImZkUkaWVlpy4P.png)

Next, we will create two state variables, one is the **currentItem** that **binds to the input box** and contains the **name of the item that the user wants to add**. The other is **list** which is a list of Objects with an **id **and a **name** and represents our shopping list.

![](https://cdn-images-1.medium.com/max/2000/0*319BS8bg5-Ycb3JO.png)

We also define an **OnClick handler** for the **Add button**. This is where the magic happens.
When the user clicks add, we set the list to `[…list, {id: nextID++, name: currentItem}]`.
This line does the following things:

* Create a new Array with all the elements of the list and an additional item {id: nextID, name: currentItem}.

* Increment the nextID so that it remains unique the next time an item is added.

Next, we set the currentItem to “” (to empty the input box).

![](https://cdn-images-1.medium.com/max/2000/0*n60oFoph95PQcsQU.png)

Now, we write the code to render the UI. We render the heading and an input box along with the add button.
We bind the value of **currentItem** with the input and **handleClick** with the **Add Items button.**

We then render a **< ul >** tag and use the map function to render the list of items as **< li >** tags inside it.

We use the map function as it loops through all the elements of an array and returns a new list by applying a function on each of them.

[https://codesandbox.io/s/arrays-state-nod8ij](https://codesandbox.io/s/arrays-state-nod8ij)
Updating Objects in State
Tags: webdev, beginners, tutorial, react
Published: 2022-09-07 06:29:37


## Updating Objects in State

State is also designed to hold J**avaScript Objects**. However, we cannot change the state of objects directly as we did with the other JavaScript values, like numbers, strings, and booleans.
We can change the state of the objects by either

 1. **Creating a new object**

 2. **Or make a copy of the existing object**

Mutation, which means **changing the properties of a value**, is possible in all the React objects. Values like numbers, strings, and booleans are immutable. While using objects we must treat them as immutable or “**read-only**”.

![](https://cdn-images-1.medium.com/max/2000/0*_HI7cnz6jfs-Zvts.png)

In the above code the **red dot** that we are trying to create and whose dimensions are already provided in the styles object does not work in the desired way. The red dot is supposed to move wherever the cursor is positioned but it does not and **stays fixed in a particular position**.

In the example above, we are trying to **directly change** the value of the object assigned to the position. This code does not give us the required results as we are not updating the state so react is unaware of the change in state and hence, the dot pointer does not move accordingly.

To fix this issue, we create another object, a new one, and pass it to the state setter function “**setPosition**”.

![](https://cdn-images-1.medium.com/max/2000/0*-WW4raKN-S9DuAJ5.png)

Without using the state setting function, React is **unaware of the change in the state** and hence does not **re-render the changes**. This code modifies the object assigned to the position from the previous render. In the above code, the changes are **rendered as the setPosition function updates the variables.**
Even though the objects are mutable, we must use the state value that we have to render as read-only. Only then will we get our desired output.

The output given by the above code is:

![](https://cdn-images-1.medium.com/max/2000/0*4lBNC6laiOyaM7bZ.png)

[https://codesandbox.io/s/updating-objects-drbtwm](https://codesandbox.io/s/updating-objects-drbtwm)
Keys in React
Tags: webdev, beginners, tutorial, react
Published: 2022-09-07 06:24:07

## Keys in React

## Introduction to Keys

A “**key**” is a special string attribute you **need to include** when creating lists of elements in React. Keys are used in React to uniquely **identify which items in the list are changed, updated, or deleted**. In other words, we can say that keys are used to give an **identity to the elements in the lists**. It is recommended to use a string as a key that uniquely identifies the items in the list.

Below is the updated code with keys:

![](https://cdn-images-1.medium.com/max/2000/0*lrf4LSmOt4AIknC9.png)

This code will give the same output as that of the previous code(**demonstrated in the List module**) but this time **without any warning**. Keys are the most useful when we **create components dynamically** or when there is **alteration** of any sort in the list.

## Using Keys in Components

Consider a situation where you have created a separate component for list items and you are extracting list items from that component. In that case, you will have to assign keys to the component you are returning from the iterator and not to the list items. That is you should assign keys to and not to **“li” tag**. A good practice to avoid mistakes is to keep in mind that anything you are returning from **inside of the map() function** is needed to be **assigned a key**.

![](https://cdn-images-1.medium.com/max/2000/0*VsNBHkHMjuXOCoOi.png)

**MenuItems is the component to be extracted.**

**Navmenu is the component that will return an unordered list.**

![](https://cdn-images-1.medium.com/max/2000/0*Gy2uQCJpmFIChfqK.png)

## Output

![](https://cdn-images-1.medium.com/max/2000/0*idK489eyGmg2cQOn.png)

The code above can be found in the link given below:

[https://codesandbox.io/s/keys-in-comp-qbuoks](https://codesandbox.io/s/keys-in-comp-qbuoks)
Errors beware...
Tags: beginners, html
Published: 2022-09-07 06:19:22

What do you do when you run into errors on your programming journey? Ask Google! Programming is hard, and it's certain that many people have already run into the issue you've encountered, and likely also blogged about it (;D). My favorite line from this video is "...being a programmer is being a glorified Googler." This is confirmed by my programmer partner.

You've basically gotta know how to search using google in order to be a good programmer. My programming partners says "There is no shame in learning from others", and he is RIGHT. One website that we're encouraged to use as a search result resource is Stack overflow, We are also encouraged to be patient with the search because some of the subjects are obscure, or we just don't know how to describe them with the purpose of searching for them. If you can't figure it out, reach out to a peer! 

...Speaking of, my partner disappeared... 🤨
Python module in simple way
Tags: python, beginners, programming
Published: 2022-09-07 06:06:19

## What is Module in python?
Module is just a file with a **.py** extension, which contain some Python code. The python code can be a a set of functions or variables.

## When do we need to use modules ?
Suppose, we are making an application to generate a diet chart. Based on some information about a person the application will generate a diet chart. So, Every time some set of specific function is calling, to make this simple we can make a module name **chart.py** with a set of specific functions to reuse in different applications again and again.

## Create a Module.
To create a module name chart, we just need to write some code in file and save the file with .py extensions. So, the name of the python file is the name of the module.

To import a module

```
import chart
```

## Python from and import statement 
To import a specific function we can use from and import statement.

```
from chart import generate
```

## Module renaming
To change the import name of the module we can use **as**

```
import chart as ch
```
Why I want to be a developer?
Tags: webdev, beginners
Published: 2022-09-07 06:05:50

I am Mateus, 18 years old and Brazilian. Also I have fallen in love with IT! And in this article I am going to explain what are my reasons and goals


The IT area is growing faster and faster every day, some people say that "technology is stealing jobs", however, for people who love tech, things are a little different. Yes, some jobs got lost in the way because of the inovations, but in the overral, new professions were created to replace the old ones. And even better! IT makes work more easily even for people who doesn't know anything about it.
I love tech because of how it can change people's life without them knowing it. Per example, imagine your life without internet, crazy right? You can't talk t people in distance, search things on google or watch online videos. This importance that this area have simply amazes me. And that's what I always wanted to be, useful to people, even if they don't really recognize it.
I also know that the technologic field is really in need of people everywhere in the world, so if young people fill this gap, I fell like it's going to be a huge step for the evolution of the area, consequently, for humanity as well.
One thing that people need a lot is computers, everyone has a computer. According to _Tecnomundo.com_ at least 50% of the world's population have computers (cellphones, laptops, desktops, etc). This means that if anyone works in a cellphone industry per exemple, this person can be helping 50% of the population in the world.
The techno industries already exist, but you can always reach for more in my concept, if life is easy righ now because of cellphones and relatives, it can be easier. My goal for now is to become a full-stack developer and enter in a small-medium company to get more experience and after study even more to get into a big company (like apple, microsoft , ubisoft or anything like that), and then, start to research how can I make life easier for people.
To be honest, I still don't know what exacly I would do. But that's why I want to get more experience! You also have to pay atenttion in people's life, what they most dislike about it? When I find the answer to it I will start working in projects to make this, even thought it'll if it's not a big change I'll be still happy by making a difference in life.
I believe that the thing that will change life as we know, in like 20 years, is AI. We already have AI that help people with their issues like ALEXA or the robot that cleans your house for you. But we could make it better, with just voice commands you could control your house! Open or close doors, turn on or off the lights or wash the dishes, it doesn't really matter the AI is going to do everything for you! So I think probably I am specializing in the AI part of tech.
Transfer @handler & Hashtags in text into clickable links - JavaScript
Tags: javascript, webdev, tutorial, beginners
Published: 2022-09-07 05:46:00

In this article we will see how transfer any word inside a text start with special character like hashtags or @ handler, you can use this JavaScript method.

{% embed https://www.youtube.com/watch?v=RfNVipRxi88 %}

First we declare the tweet text variable either from the Dom element or a single string text;

```javascript
let tweet = 'Hello World @twitter #GoodDay'; /* Or document.getElementById('tweetDiv') */
```

Then we turn this text into array.
```javascript
let tweetArr = tweet.split(" ")
```

Now we loop through this array to match and attach links to each string start with '@' or '#'.

```javascript
for(let i = 0; i < tweetArr.length; i++){
    let SelectedTweet = tweetArr[i];
    if(SelectedTweet.startsWith('@')){
      tweetArr[i] = '<a href="https://twitter.com/'+SelectedTweet+'">'+SelectedTweet+'</a>'
    } else if(SelectedTweet.startsWith('#')){
      tweetArr[i] = '<a href="https://twitter.com/search?q=%23'+SelectedTweet+'">'+SelectedTweet+'</a>'
    }
}
```

And then we insert the updated text to the Dom element after we convert the Array into Text.
```javascript
tweet = tweetArr.join(" ")
console.log(tweet);
/* Or document.getElementById('tweetDiv').innerHTML = tweet */
```

And that how we transfer text start with @ or Hash into Twitter style links, Hope this simple tutorial help you get a better understand of how these things done.
react-launcher
Published: 2022-09-07 05:45:46

A React-Router based launcher, written using static routes

```tsx
const RouterConfig = [
    {
        path: '/',
        component: Home,
    },
    {
        path: '/about',
        component: About,
    },
];

const app = new Launcher({
    routes: RouterConfig,
});

app.start();
```

Support for a set of plugin mechanisms

  

```tsx
const plugin = {
    name: 'auth',
    outer: (children, opt) => {
        return <AuthProvider opt={opt}>{children}</AuthProvider>;
    },
    inner: (children, route, opt) => {
        return (
            <AuthRouteComponent route={route} opt={opt}>
                {children}
            </AuthRouteComponent>
        );
    },
};

const Home = () => <div>home</div>;
const About = () => <div>about</div>;

const app = new Launcher({
    routes: [
        {
            path: '/',
            component: Home,
        },
        {
            path: '/about',
            component: Home,
            // /about authentication is required
            hasAuth: true,
        },
    ],
});
app.use(plugin, opt);
```

outer will be wrapped in the outer layer of the `Router` component, as the parent of the `Router`, which can be interpreted as globally unique, inner will be wrapped outside each `Route` component, a common scenario is route authentication, as in the code above
  
Why am I writing this?

In the company's actual project, everyone is native React-Router, based on dynamic routing flexibility, 1. the project's route organization logic is not traceable, a novice want to find a page, you have to find from the outermost layer layer, 2. encapsulation form is not uniform, for some control logic (authentication), generic logic (page title) and other needs, each application Encapsulation of a large number of BasicRoute, TitleRoute and some interception of the operatio

Personally, I feel that while I'm currently using React-Router's [dynamic routing](https://v5.reactrouter.com/web/guides/philosophy),But we don't use the real features of dynamic routing, which according to the example on the official website is a route generated at rendering time, and its feature is the ability to change the application's route at rendering time, i.e. responsive routing, so the result is that neither the flexibility of dynamic routing is used, nor the simplicity of static routing is lost, and all the advantages of routing in the application can be seen at a glance.

Project Address：[https://github.com/myNameIsDu/react-launcher](https://github.com/myNameIsDu/react-launcher)

Personal bias, please correct me if I'm wrong
How to deploy power apps (Canvas) solution from one tenant to another tenant (client) in azure devops?
Tags: azuredevops, azure, powerapps, azurepipeline
Published: 2022-09-07 05:37:57

How to deploy power apps (Canvas) solution from one tenant to another tenant (client) in azure devops?

Hello, I created Powerapps (canvas app) solution in my organization environment so I want to deploy my solution in client environment means its different tenant. I know how to import and export solutions in same tenant but I want to know this same function in Different tenant in azure devops.
Functional Components and Props
Tags: beginners, programming, tutorial, react
Published: 2022-09-07 04:24:22


## Functional Components

In this section, we will only talk about functional components as it is more prominent and widely used.

**Functional Components: 
**Functional Components are simply JavaScript functions that take **props as an argument** and **return a react element**. We can create a functional component to React by writing a JavaScript function. These functions may or may not receive data as parameters. In the functional Components, the return value is the JSX code to render to the DOM tree. There is no render method used in functional components.

[https://codesandbox.io/s/functional-components-3wlxjo?file=/src/components/PhotoEditor.js](https://codesandbox.io/s/functional-components-3wlxjo?file=/src/components/PhotoEditor.js)



![](https://cdn-images-1.medium.com/max/2000/0*jvK_VTxDqVc63olk.png)

In the above code, we have created a functional component named **“Photo Editor”** in which we are returning the img tag.
The output of the above is given below

![](https://cdn-images-1.medium.com/max/2000/0*3vzRdG2I_7giarKi.png)

## PROPS

Props, which stands for **properties**, are arguments that are passed into the React Components
Now, in the above PhotoEditor component itself, we demonstrate the use of props.

![](https://cdn-images-1.medium.com/max/2090/0*0Kwpp2WUlgEwwZd_.png)

In the above code snippet, the component PhotoEditor **receives the property as the “props” **object. Now we use the name and type attribute in this component whose data has been provided to us by the **Parent Component App**.

![](https://cdn-images-1.medium.com/max/2000/0*c99fx2K47_jI-wyN.png)

In the output below we see that the image that we had provided has been captioned with the **name and the type properties.**

![](https://cdn-images-1.medium.com/max/2000/0*rkJsLIwd5urau4V2.png)

## Destructuring Props:

Destruction of Props simply means **segregating and extracting or using the properties which we need**.

In the following code, instead of writing props and associating with all the props we call only the specific properties that we want, in this case name and type. While doing this we do not have to write props.{property}, rather we can directly write the name of the attribute.

![](https://cdn-images-1.medium.com/max/2000/0*0r84HhShJAvehCuN.png)

**By doing this we would eliminate the repetition of using props every single time.**

[https://codesandbox.io/s/functional-with-props-ryrw16](https://codesandbox.io/s/functional-with-props-ryrw16)
Err: fetching data via API works on localhost but doesn't work on live server
Tags: api, react, javascript, server
Published: 2022-09-07 05:34:55

As a young developer, there are some minor bugs you might encounter that will be pretty confusing. Every new developer, and even experienced devs encounter this every now and then. The thing about software development is that a single comma, semicolon or colon in a wrong place will likely make your code not compile, or render an element or function undefined.


When I started out newly, I once spent two days searching for a bug, only to find out that the issue was just a '}' in a wrong place... bugs are completely normal.


So I was working on a demo movie app some time ago, it happened that the API fetch and every components worked perfectly on localhost, but wasn't fetching when deployed on live server. It was really confusing for me then that I had to abandon the project altogether. Recently I was going through my repositories and found the abandoned project, so I decided to try and fix it.

Issue: ```const handleSubmit = async () => {
    setLoading(true);
    const response = await fetch(
      `http://www.omdbapi.com/?s=${searchParam}&apikey=70c11897`
    );
    const data = await response.json();
    console.log(data);
    if (data) {
      setMovieList(data.Search);
      localStorage.setItem("movieList", JSON.stringify(data.Search));
      setLoading(false);
      setSearchParam("");
    }
  }; ```

It turned out that the problem was a very simple one. The API URL I was using was 'http://apiurl.com/key'. Now the problem is most web engines don't render insecure links, so my API URL was blocked from fetching data on live server. The simplest solution right? All I needed to do was add 's' to the 'http' like so 'https://apiurl.com/key'.

Fixed: ```const handleSubmit = async () => {
    setLoading(true);
    const response = await fetch(
      `https://www.omdbapi.com/?s=${searchParam}&apikey=70c11897`
    ); //notice the 's' now added to 'http'
    const data = await response.json();
    console.log(data);
    if (data) {
      setMovieList(data.Search);
      localStorage.setItem("movieList", JSON.stringify(data.Search));
      setLoading(false);
      setSearchParam("");
    }
  };```


Like I said, some bugs can be pretty confusing for beginners, but hey, even the best developers were once beginners and coding is one skill that requires tenacity, determination and resourcefulness. So when you encounter a bug, seek for solution on open source websites or ask experienced devs for help. I hope this helps someone. ☺