teleren/devto huggingface dataset:
TypeError: Cannot read properties of undefined (reading 'title')

Tags: react, materialui, javascript, webdev
Published: 2022-02-23 10:20:58

I want to add the element selected of a select into a table and after inserting more than one element I get the error in the title!

The elements of the select

`export const getBP = () => [
  { id: "1", title: "A" },
  { id: "2", title: "B" },
  { id: "3", title: "C" },
  { id: "4", title: "D" },
  { id: "5", title: "E" },
  { id: "6", title: "F" },
  { id: "7", title: "G" },
  { id: "8", title: "H" },
  { id: "9", title: "I" },
];`

the function that I am using to get the elements from the local storage(since I am inserting them in local and then get them from there to the table

`export function getAllDocument() {
  if (localStorage.getItem(KEYS.documents) === null)
    localStorage.setItem(KEYS.documents, JSON.stringify([]));
  let documents = JSON.parse(localStorage.getItem(KEYS.documents));
  let BPs = getBP();
  return documents.map((x) => ({
    ...x,
    emploi: BPs[x.Emploi - 1].title,
  }));`

The Table element: 

`<TblContainer>
          <TableBody>
            {
              records.map(item=>
                (<TableRow key={item.id}>
                  <TableCell>{item.Radical}</TableCell>
                  <TableCell>{item.emploi}</TableCell>
                  <TableCell>{item.Montant}</TableCell>
                  <TableCell>{item.Taux}</TableCell>
                  <TableCell>{item.Duree} mois</TableCell>
                  <TableCell>{item.DateE}</TableCell>
                  <TableCell>{item.DateP}</TableCell>
                </TableRow>)
              )
            }
          </TableBody>
        </TblContainer>`

This last element is the select component:

`import React from 'react'
import { FormControl, InputLabel, Select as MuiSelect, MenuItem, FormHelperText } from '@material-ui/core';

export default function Select(props) {

    const { name, label, value,error=null, onChange, options } = props;

    return (
        <FormControl variant="outlined"
        {...(error && {error:true})}>
            <InputLabel>{label}</InputLabel>
            <MuiSelect
                label={label}
                name={name}
                value={value}
                onChange={onChange}>
                <MenuItem value="">None</MenuItem>
                {
                    options.map(
                        item => (<MenuItem key={item.id} value={item.id}>{item.title}</MenuItem>)
                    )
                }
            </MuiSelect>
            {error && <FormHelperText>{error}</FormHelperText>}
        </FormControl>
    )
}
`
Absolute imports (in react)
Tags: javascript, react
Published: 2022-02-23 09:58:54

Hey there, some time ago i found my self with imports like this:

```
import Card from "../../../components/card";
```

Which is quite a mess and not clear at all.

But here is where absolute imports came to rescue me.

The first thing we have to do is create a file, if you`re using **javascript **the name of your file will be jsconfig.json
and the file have to be at the same level as package.json.
Inside of it we will add this

```
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}
```

If you`re using **typeScript** you already should have the file which is tsconfig.json and you will have to add

```
{
  "compilerOptions": {
    ...,
    "baseUrl": "src"
  },
  "include": [
    "src"
  ]
}
```

Now that we have out jsconfig.json file set up we can do our imports.
Launched my first product on Product hunt
Tags: product, launch, news, webdev
Published: 2022-02-23 09:56:48

Product Hunt Link: https://www.producthunt.com/posts/blox-5

I have been doing web development for the last 4 years and I have seen a wave of new tools that make development easier and more fun. Though development is a tedious task and consumes a lot of time still there are so many resources that make it simpler or should I say try to make it simpler. Following the same stream, I decided to develop a tool that would save developer’s time and make coding easier. During my time coding I have always used VS Code so I do have this soft corner for it. Naturally I decided to make a tool for VS Code users. After doing some research and many failed tests with my team, [blox ](https://marketplace.visualstudio.com/items?itemName=vsblox.blox)was born. blox is a VS Code extension that has pre-made UI components in it. Currently blox has more than 1500 UI components and 250 of them are free. We are now planning to launch blox on product hunt to present this tool to a larger audience with very high hopes. We as a team believe that the more exposure this tool gets, the more it will improve.
Different ways of export and import
Tags: javascript, react
Published: 2022-02-23 09:51:33

Here we will talk about how and when should we use the import without brackets like this:

```
import Card from "components/card";
```
and when we have to use the import with brackets like this:

```
import { Card } from "components/card";
```
It depends on how we made the export, if we made a export default we will have to import without brackets like in the first example

whereas if we made an export like this:

```
export const Card = () => {
 return(

)
}
```
our import will look like this


```
import { Card } from "components/card";
```

Thanks for reading.
Tips memilih rumah pertama bagi pasangan muda.
Tags: properti, rumah, sales, investasi
Published: 2022-02-23 09:37:58

Hampir semua orang setuju bahwa rumah adalah hal pertama yang perlu diusahakan ada ketika memulai kehidupan berumah tangga. Banyak orang terutama pasangan muda dihadapkan pada 1001 pertanyaan mengenai rumah seperti apa yang cocok untuk saya beli.

Hal pertama yang diperhatikan tentulah keuangan. bila secara finansial belum terlalu mapan, tidak ada salahnya memilih cara bayar menggunakan fasilitas Kredit dari Bank atau KPR. karena pasti lebih terjangakau dibandingkan membeli secara cash keras ke  Developer.

Hal kedua Adalah lokasi, lokasi yang di tengah kota dan dekat dengan tempat kerja mungkin sudah agak susah untuk didapat saat ini. Namun sebisa mungkin pilihlah rumah yang dekat dengan akses transportasi umum dan tidak jauh dari jalan utama.

Hal yang ketiga adalah Developer yang membangunnya. Untuk rumah yang sudah ready dan bersertifikat pemilihan developer mungkin tidak usah begitu dipikirkan karena relatif aman. Berbeda halnya dengan rumah yang masih indent atau dalam tahap pembangunan, pastikan developernya bereputasi baik dan sudah memiliki pengalaman dalam membangun perumahan sebelumnya. Sudah banyak peristiwa perumahan yang batal dibangun karena perijinan tidak jelas atau karena developer memiliki finansial buruk.

Hal yang keempat dan seterusnya mungkin bisa ditambahkan terus menerus. Namun ada baiknya selama tiga hal utama sudah dipenuhi segeralah mulai tindakan nyata. Lakukan survey ke lokasi perumahan dan segera beranikan diri untuk memulai proses KPR nya. 

Pilihan perumahan baru akan selalu ada namun harga nya pasti akan semakin mahal dan lokasi biasanya akan semakin jauh dari pusat kota.

_bila anda berencana untuk memiliki rumah yang berkualitas dan dibangun developer terpercaya ada referensi nih, silahkan klik link nya:
_
https://suterasawangan.filofim.com
Easy Explanation of Reduce Function
Published: 2022-02-23 09:32:37

Suppose we have an array of numbers, which is denoted by `let A= [1,2,3]`. We want to find the total of all array elements. In this case, we can use for loop.But we we may also use reduce function. We may also use the `array.prototype.reduce` function to do this task.

`array.reduce` function takes two arguments. One is a callBack function and other is initial value. 

```
myArray.reduce(callBack,initialvalue)
```
This callback function takes four arguments-previousvalue, current value,currentIndex, Array. The first two arguments are required, and the last two are optional.  

```
const callBack = (
previousvalue, //required
currentvalue, //required
currentIndex, //optional
Array //optional
)=>{
}
```
Example: 

```
const myArray = [1,2,3]
const myFunc = (previous,current)=>{
return previous+current
}

const result = myArray.reduce(myFunc,0)
```
The final result will be 6, but this result is dependent on the initial value. 

We will try to understand why this result is dependent on the initial value. As there are three elements, reduce method will iterate three times.
In the first iteration, the previous-value and current-value is zero and one respectively. Finally, its sum is be stored in the total value. In the next iteration, the total value becomes the previous value, and the current value is the next array element, and its total is stored at the total variable. Thus the loop continues until the last array element. 
  
![iteration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdqbef5wiksuv7h7k0qw.PNG)
Become a co-founder 
Tags: programming, webdev, career, 100daysofcode
Published: 2022-02-23 09:30:41

**"orderOpedia"**
An E-commerce platform for selling books and courses online.

Hello, dev.to Community I am ASN, and I am looking for a senior software developer to complete this task or join me as a co-founder.

Join me to build it together for the world.
"orderOpedia"
 

> A place not just for buying and selling but for reading and feeding minds.

#orderOpedia
Drop me a mail or connect here on the developer's world.
orderopedia@gmail.com
Writing for Google or writing for people?
Published: 2022-02-23 09:28:59

I've been building websites for over two decades.

I used to put funny things on my web pages, like text-emotions or emojis.

Recently, more and more websites are created for Google, not for people. Even though Google had declared they never indicated webmasters to consider Google only.

That's really sad.

Today I have only [7.5 CPS](https://www.arealme.com/click-speed-test/en/). That's sad.
Rubber Duck Debugging
Tags: beginners, programming, computerscience
Published: 2022-02-23 09:25:45

## What is debugging?
Debugging is the process of finding and removing bugs(errors) in a software code.

## What is Rubber Duck Debugging?

Rubber Duck Debugging is a method in computer science of debugging in a way by articulating a problem speaking in natural language.

**What does that mean?** 🤔
You start coding. Then an unexpected error happens. Something is wrong with your code so you have to debug. This is the moment that rubber duck debugging is needed. 
Grab a rubber duck or if you don't have one just grab an object and explain to the object your code line by line. By explaining and speaking out loud your code, you may understand what is wrong with it. 
You may not find the answer on the first try but this method is effective and has been proved by many programmers.

I know that there are so many tools for debugging BUT the rubber duck debugging method will help you to understand your code and learn more.

## Conclusion

This was a basic explanation for the rubber duck debugging method. Hope you got the idea of what rubber duck debugging is.

**References**
[Rubber Duck Debugging Website](https://rubberduckdebugging.com/)
*Useful website if you want to talk with a duck and explain the problems of your code*

[Debugging](https://en.wikipedia.org/wiki/Debugging)

[Rubber Duck Debugging](https://en.wikipedia.org/wiki/Rubber_duck_debugging)
How to Customize the Toolbar in an Angular Rich Text Editor Component
Tags: angular, webdev, webcomponents
Published: 2022-02-23 09:23:24

See how easily you can customize a toolbar in the Syncfusion [Angular Rich Text Editor](https://www.syncfusion.com/angular-ui-components/angular-wysiwyg-rich-text-editor). This video explains how to customize a toolbar in the Syncfusion Angular Rich Text Editor. You will learn about different types of toolbars and how to add a quick inline toolbar to the Rich Text Editor component. 

Product Overview: https://www.syncfusion.com/angular-ui-components/angular-wysiwyg-rich-text-editor

Download a getting started example from GitHub: https://github.com/SyncfusionExamples

{% youtube zQtXvvPxAJQ %}
E-Commerce Build - What language/framework?
Tags: help, webdev, php, javascript
Published: 2022-02-23 08:58:45

Looking for some advice on how to go about producing a bespoke E-Commerce platform. 

## **Background** 
Digital Agency looking to niche in the ecom side of things. Experience with WordPress and WooCommerce, looking to develop our own in order to achieve more customisation. We have faced difficulties using the WooCommerce ecosystem for certain integration builds so looking to expand the tech.

## **What Tech?**

Looking for suggestions where we can achieve small scale builds but also have the ability to scale up to integrations with external APIs for larger businesses - B2B. 

## **Initial Thoughts**

Initially, my go to would be Laravel, as coming from a predominantly PHP focused background and knowing Laravel to some degree it makes sense. However, now seeing the sheer amount of JavaScript libraries there are I am stuck on decisions.


Any feedback or if anyone could shed a light on their own experiences would be much appreciated. 

Thanks

**UPDATE**
I think we are going to start using Laravel to achieve the E-Commerce build. After doing some research and taking on board your guys' feedback. It seems appropriate to use this framework. 

Cheers all
Log 1 - Building my first SaaS
Tags: saas, startup, community
Published: 2022-02-23 08:47:04

---
title: Log 1 - Building my first SaaS
published: true
description: 
tags: saas, startup, community
series: Building my first SaaS
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqu1mitdpcfrcni1a779.jpg
---

Today on my to-do list is to choose customers for my first SaaS product. 

While I keep my expectations low, I also want to use my skills to make someone happy.

So I decided to choose a group of underserved and often ignored people. 

My customers will be...retired people! 

They have time and money. I know what you think; they are older and don't use the web that much. 

But I have seen with my own eyes how active they can be in Facebook groups when someone posts something that interests them!

They are here, and they want to be part of the community as the rest of us.

The goal of my first startup will be to make that happen!

I have a target audience and goal; next on the to-do list is to develop some ideas!

Do you have some ideas? Can you share and help me?
Until when should you persevere?
Tags: discuss, personal, improvement, growth
Published: 2022-02-23 08:46:13

---
title: Until when should you persevere?
published: true
description: Until when should you persevere?
tags: discuss, personal, improvement, growth
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrzm8fs5u1acuo7voyxw.jpeg
---

_Originally published on [my blog](https://www.nikola-breznjak.com/blog/daily-thoughts/until-when-should-you-persevere/)._

> There are multiple quotes around perseverance (and images similar to the one in the post), and I'm all for it because I tend to believe that most people give up too soon. However, until when should you be pivoting (fancy word for failing)? Until your run rate goes dry, until Nth pivot, until x event? What are the N and/or x?

---

This is [why I write](https://www.nikola-breznjak.com/blog/daily-thoughts/why-do-i-write-these-daily-thoughts-posts/) these 'daily thoughts' posts.
Back to Back #10 - Back-end news by SFEIR 
Tags: newsletter, french, backend, cfp
Published: 2022-02-23 08:26:28

_Dernier mercredi du mois, c'est donc le moment de retrouver la newsletter back-end de SFEIR_ 🕑

---

### 🔍️ NestJS Discovery

Le mois dernier, Célia vous a présenté NestJS et ce que ce framework peut apporter aux développeurs Node.js. On va plus loin avec Maxence qui nous parle du Discovery. Retrouvez son guide ici 👇

{% embed https://dev.to/sfeircode/nestjs-discovery-15kd %}


### 🤖 [AlphaCode : la nouvelle IA de DeepMind code aussi bien qu’un développeur humain](https://www.01net.com/actualites/alphacode-la-nouvelle-ia-de-deepmind-code-aussi-bien-qu-un-developpeur-humain-2054310.html)

Est-ce la fin de la route pour les développeurs humains ? DeepMind, la filiale d'Alphabet, a communiqué sur sa nouvelle intelligence artificielle, AlphaCode. Capable de générer du code à partir de problèmes algorithmiques, l'IA a participé à des compétitions de code. AlphaCode s'est placée dans le top 54% des meilleurs participants. Ainsi, ces résultats ouvrent la voie à un développement autonome des applications.

### 🐍 [Creating Beautiful Tracebacks with Python's Exception Hooks](https://martinheinz.dev/blog/66)

Ce billet de [Martin Heinz](https://twitter.com/Martin_Heinz_) nous parle de la gestion d'erreurs Python, plus précisément de leur affichage. Quand une exception est levée (et n'est pas attrapée), le hook `sys.excepthook` est appelé et affiche l'erreur. On peut personnaliser cette fonction, Martin nous montre comment. On peut aussi se baser sur des hooks existants et Martin nous en présente cinq.

### 🍃 Spring Tips: IO, IO, It's Off to Work We Go

Finissons la newsletter avec [Josh Long](https://twitter.com/starbuxman), Spring Developer Advocate, qui nous parle des I/O bloquants et non-bloquants dans la programmation réactive et la programmation réseau. Java IO, Java NIO ainsi que Netty sont utilisés dans ce guide vidéo.

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

---

### CFP et évènements
Voici quelques _calls for papers_ ouverts actuellement : 
- [Sunny Tech 2022](https://conference-hall.io/public/event/m1kfbpSntxF3QBVUwoFY), CFP ouvert jusqu'au 28/02
- [Voxxed Days](https://cfp-voxxed-lux.yajug.org/), CFP ouvert jusqu'au 31/03
- [DevFest Lille](https://conference-hall.io/public/event/vzbfowsExm54SrWLtxA5), CFP ouvert jusqu'au 31/03 

D'autres CFP sont attendus, ceux du DevFest Nantes (01/04)
et du Devoxx Belgium (juin).

---

_Merci à la communauté SFEIR ! On se donne rendez-vous fin mars._
Why python?
Tags: showdev, python, productivity
Published: 2022-02-23 08:04:39

Why Python?

It is a simple question and there is a simple answer.Python is the most popular programming language in the world it is super simple to use.Many fields like machine learning,artifical intelligent,web development,software development etc are using python you can learn it very fast.There are many courses available in youtube and other platforms and if you already learnt i will suggest some projects in my github-https://github.com/sripadhs/

Comment your feedback!
A Fun Programming Joke To Start Your Day
Tags: jokes, dailydeveloperjokes
Published: 2022-02-23 08:00:07

---
title: "A Fun Programming Joke To Start Your Day"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258c78158d.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
I never tell the same joke twice

I have a DRY sense of humor.
 -->
What introduced you to programming?
Tags: discuss
Published: 2022-02-23 07:42:15

When I was young, we used to share software between my friends via giving the program's folder on a USB stick. I would always wonder how these programs being shared were made. I noticed that each folder contained a lot of files and whoever made that program had to create all these files in specific order - not thinking much of what was in them. 

One day I saw my Dad, who is a linguist, was browsing CodeAcademy, I asked him what the site is for and he told me. From that point I learned the word "code" and then started Googling about it - the rest was history.
How to use PWM dimmer for LED strip light
Tags: discuss, productivity, ledpowersupply, striplighting
Published: 2022-02-23 07:34:17


 At present, PWM dimming is one of the more popular dimming technologies used in LED dimming products. PWM is an analog control method that modulates the bias of the base of the transistor or the gate of the MOS tube according to the change of the corresponding load to achieve the change of transistor or MOS tube conduction time, so as to achieve the change of constant voltage switching power output. It is characterized by simple structure and easy control. This approach enables the output voltage of the power supply to remain constant as operating conditions change, and is a very effective technique for controlling analog circuits using digital signals from microprocessors. They are used in many fields ranging from measurement and communication to power control and conversion.

The advantages of PWM dimming
1.No chromatic aberration because the LED always operates between full-amplitude current and 0
2.Dimming is precise because the waveform in the pulse can be fully controlled to a high degree of accuracy, so it is easy to achieve an accuracy of one ten thousandth.
3.It can be combined with digital control technology for control. Because any digital can be easily converted into a PWM signal.
4.Flicker will not occur even if the light is dimmed over a wide range. Because it does not change the operating conditions of the constant current source (boost ratio or buck ratio), it is much less likely that problems such as overheating will occur.
REDUX TOOLKIT
Tags: javascript, react, redux
Published: 2022-02-23 07:33:01

**What is Redux?**
Redux is a state container that holds the JavaScript applications behavior consistently across client and server. In some components to pass data, we need to props drilling. But, as Redux is considered as a central store, then props drilling is not needed. Every component accesses the data from the central store easily.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eq5quca4s01aq68etwmp.png)
_Image Source_: [codecentric](https://blog.codecentric.de/)

**Uses of Redux**
- Redux makes the state predictable
- Redux is easily maintainable
- Redux is easy to test and also optimizes the performance of the application

**Redux Workflow**
Redux workflow is made of 3 main components. They are:
**1**. **Store**: Central store from where all states are saved and managed. As usual, a reasonable application has only one store.
**2**. **Actions**: Actions are pure JavaScript objects that have specific properties. The property contains an action type and info that need to be updated in the state. Depending on the application a lot of actions happened.
**3**. **Reducers**: Reducers are pure JavaScript functions that perform the action to update the state and return the new state. It takes the current value of a state, takes the action depending on the action type, and returns the new state.
**Finally**, the state is updated in the store where all of the states are managed.

**What is Redux Toolkit?**
The Redux store setup and the basic configuration to use in an application are similar. It is a waste of time matter to write the same script for different applications. Sometimes it’s a possibility to make mistakes. In a bigger application, there may be other packages needed to configure the Redux. Considering these matters, the needed packages and the basic configuration for the Redux setup are extracted and build a new package, which is Redux Toolkit.
In Redux Toolkit, the basic structure of the Redux and its needed packages are included, which makes our code and folder structure more understandable and organized.