teleren/devto huggingface dataset:
Tree In React
Published: 2023-11-17 11:47:59

``` js
import React, {useState} from 'react'
import ReactDOM from 'react-dom'

function App() {
  const data = [
    {
      name: 'Node-1',
      id: 1,
      parent_id: null,
    },
    {
      name: 'Node-2',
      id: 2,
      parent_id: null,
    },
    {
      name: 'Node-1-1',
      id: 3,
      parent_id: 1,
    },
    {
      name: 'Node-1-2',
      id: 4,
      parent_id: 1,
    },
    {
      name: 'Node-1-1-1',
      id: 5,
      parent_id: 3,
    },
    {
      name: 'Node-1-1-2',
      id: 6,
      parent_id: 3,
    },
    {
      name: 'Node-1-2-1',
      id: 7,
      parent_id: 4,
    },
    {
      name: 'Node-2-1',
      id: 8,
      parent_id: 2,
    },
    {
      name: 'Node-2-2',
      id: 9,
      parent_id: 2,
    },
  ]
  // dependency

  return <Tree data={data} />
}

const TreeNode = ({node, data, onToggle}) => {
  const hasData = data.some((item) => item.parent_id === node.id)

  return (
    <div>
      <div onClick={() => onToggle(node.id)}>
        {hasData && <span>{node.isExpanded ? ' - ' : ' + '}</span>}
        {node.name}
      </div>
      {node.isExpanded ? (
        <div>
          {data
            .filter((item) => item.parent_id === node.id)
            .map((eachChild) => (
              <TreeNode
                key={eachChild.id}
                node={eachChild}
                data={data}
                onToggle={onToggle}
              />
            ))}
        </div>
      ) : (
        <></>
      )}
    </div>
  )
}

const Tree = ({data}) => {
  const [treeData, setTreeData] = useState(data)

  const handleToggle = (id) => {
    setTreeData((prevData) =>
      prevData.map((each) =>
        each.id === id ? {...each, isExpanded: !each.isExpanded} : each,
      ),
    )
  }

  return (
    <div>
      {treeData
        ?.filter((eachData) => eachData.parent_id === null)
        .map((eachNode) => (
          <TreeNode
            key={eachNode.id}
            node={eachNode}
            data={treeData}
            onToggle={handleToggle}
          />
        ))}
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

```
Cheap camgirls
Tags: webdev
Published: 2023-11-17 11:39:25

If you are looking for cheap cam girls sites you have come to the right place. As enjoyable and entertaining as live cam sites can be, we have to be honest: it’s an expensive hobby that could leave you eating ramen for months on end. Check out the best cheap cam site **[CheapLiveGirls.com](https://cheaplivegirls.com)**

It operates like most cam sites do. There are cheap rooms that you can enter to view live cam shows, but if you want the girls to do anything specific during the show, you will need to spend. However, it is really affordable. This is because the models don’t charge you per minute. It’s based solely on your donations.
The one drawback to it is pricing structure. Most cam sites will allow you to enter free cam shows, but not before informing you of what you should tip the model or what each naughty activity costs. Getting a girl to perform a desired act is going to require linking up with the other guys in the chat and pooling that money until the model’s goal is reached. Each model comes up with a different money goal per show and tries to seduce the viewers into paying up. You can’t blame them; coming is their job.

Private shows aren’t a thing here. However, the models on this **[adult camgirls](https://cheaplivegirls.com)** site are very interactive. They pay a lot of attention to the chat as their show is live and they make you feel like you are actually in the room with them while they are performing. People have complained before that some models on here talk too much or spend too much time replying to their fans.
How to Troubleshoot QuickBooks Error Code 6123, 0?
Tags: quickbookserrorcode6123
Published: 2023-11-17 11:38:59

QuickBooks can change the way entrepreneurs perform accounting and bookkeeping activities manually, but at the same time, it should not be overlooked that even this advanced software is sometimes prone to errors. Specifically. A common error observed by users is **[QuickBooks Error 6123](https://www.axpertaccounting.com/fix-quickbooks-error-6123-0/)**. This error usually occurs when users try to open a company file. We recommend that you review this section carefully to troubleshoot this issue manually. However, a better way to resolve the issue is to contact the QuickBooks error support team with a reputation for expertise. You can contact our team of knowledgeable and certified QuickBooks experts via helpline i.e. +1-888-351-0999. We will walk you through the process and ensure that this error on your system remains a thing of the past. On that supportive note, let's continue!

**Steps to resolve QuickBooks Error Code 6123, 0**

Here are the specific ways that can help you to resolve the QuickBooks error code 6123, 0.

**Method 1: Rename .ND and .TLG files**

Rename transaction and network log files for QuickBooks. These files have the extension .ND and “.TLG”, respectively. The steps to rename them are given below:

• First, you need to open the folder containing the company files.
• Then select the corresponding .ND file.
• Next, right-click on the company file and then click on the Rename option.  
• Also, rename the .ND file to .ND.OLD
• Then select the .TLG file and rename it the same way you rename the Network (.ND) file.
• Now rename it to .TLG.OLD.
• Finally, make sure to open the QuickBooks company file.

**Method 2: Create a new Windows user
**
The possibility of Windows user login failure may be higher. So, in this case, you can perform the steps below to fix QuickBooks error 6123, 0:

•Open the Control Panel and click on the Create new user option in the User icon.  
•Next, select an administrator for the user type.
• Immediately after that, disconnect from the existing one.
• Next is to reboot the system and then log in with the new user's credentials.
• Now move the company file to the desktop.
• Finally, open QuickBooks and navigate to the company file.

**Conclusion:
**
Fixing QuickBooks error code 6123 doesn't involve any complicated science. Performing the simple procedures listed above can help you resolve the problem. However, if none of these methods works for you and this error continues to bother you, in that case, don't hesitate to talk to our team of QuickBooks business support experts. Connect with us by calling our customer support line i.e. +1-888-351-0999 and let us handle the issue for you. Our certified accounting professionals are available to assist you whenever you need it.
The MILLIONAIRE SECRETS
Published: 2023-11-17 11:27:44

LEARN EXACTLY HOW I BUILT 4 ONLINE BUSINESSES, MAKE 6 FIGURES AND HOW YOU CAN MAKE $10,000 A MONTH

1.How you can make $5,000+ from Instagram even if you have less than 500 followers.

2.How to setup your own Dropshipping business with 0 investment.

3.How to earn from Amazon FBA.

4.How to leverage power of AFFILIATE MARKETING and earn money while you sleep

These are going to help you to create an additional source of income and help you to MAKE MONEY WHILE YOU SLEEP because the legendary billionaire Warren Buffett once said if you don't find a way to make money while you sleep you will work until you die.
The additional income that you make from these businesses will help you to achieve FINANCIAL FREEDOM, to travel the world, to buy your dream car or buy your own dream mansion and more importantly be YOUR OWN BOSS.

[Click here to MILLIONAIRE  SECRETS](url)
Introduction to JSX
Tags: react, webdev, beginners, tutorial
Published: 2022-09-07 04:04:17


## Introduction to JSX

### JSX is basically a syntax extension of regular JavaScript and is used to create React elements. These elements are then rendered to the React DOM.

### Let us see a sample JSX code:

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

Why JSX?

* It is faster than normal JavaScript as it performs optimizations while translating to regular JavaScript.

* It makes it easier for us to create templates.

* Instead of separating the markup and logic into separate files, React uses components for this purpose.

In React we are allowed to use normal JavaScript expressions with JSX. To embed any JavaScript expression in a piece of code written in JSX we will have to wrap that expression in curly braces {}.

### Consider the following piece of code:

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

    **Output**

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

    

In the above program we have embedded the javascript expression const name = “Geeks”; in our JSX code. We embed the use of any JavaScript expression in JSX by wrapping them in curly braces.

## JSX Expressions

Expressions are also supported in JSX, which is written in JavaScript syntax. The expressions are enclosed in curly brackets. Expressions can contain conditional statements like if-else and for loops. The following code is an example of JSX Expression:

![](https://cdn-images-1.medium.com/max/2094/0*fZ8i23OdR_T979-W.png)

    **Output**

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

    

## JSX Attributes

JSX allows us to use attributes with the HTML elements just like we do with normal HTML. But instead of the normal naming convention of HTML, JSX uses the camelcase convention for attributes. For example, class in HTML becomes className in JSX. The main reason behind this is that some attribute names in HTML like ‘class’ are reserved keywords in JavaScript. So, in order to avoid this problem, JSX uses the camel case naming convention for attributes.

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

    Output:

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

    

Comments in JSX

JSX allows us to use comments as it allows us to use JavaScript expressions. Comments in JSX begins with /* and ends with */. We can add comments in JSX by wrapping them in curly braces {} just like we did in the case of expressions. Below example shows how to add comments in JSX:

![](https://cdn-images-1.medium.com/max/2000/0*GmxhkOAXG93VFEoA.png)
Use This ChatGPT HACK to Organize Your Schedule in a Minute or Less!
Tags: productivity, tutorial, ai, chatgpt
Published: 2023-11-17 11:26:20

_Schedule_, schedule, _tomatoes_, tomatoes. 🍅 

I was in the gym today when I had an idea. 

---

# What if I used ChatGPT to help me organize my agenda?

---

I know. Nothing brilliant about it, but the result was... **surprising**.

ChatGPT not only organized it for me but also **created an .ics file** for me to quickly add the events to my Google or iPhone calendar.

---

**Yes, you ~~heard~~ read it**. I didn't even had to run a python task. It coded and run all by itself, and answered me already with a download link:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqye3ih05eqsc1gu3p1q.png)

---

# Is this magnificent or not?

---

I'm sharing here **the prompt** I used, so hopefully you'll have the same good experience as I just had. (I'm using the paid version).

> Me: You're my personal assistant helping me with defining my schedule. Ask me what you need to know.


> ChatGPT: [Asked me several questions]


> Me: [I answered about my fixed commitments and what I need to do daily in general terms]


> ChatGPT: [Suggested an agenda, which was pretty good]


> Me: I need you to transform the agenda into an .ics file to download to my Google or iPhone calendar. Make it one month long from today (November 17, 2023). If you encounter an error, try a different approach. I know you can do it!

---

That did the trick! 

"Follow me for more tips" (as if I were a YouTuber TikToker influencer 😅).

{% cta https://chat.openai.com/g/g-5l8eKSBD2-schedule-helper %} Try the GPT Schedule Helper I built on OpenAi {% endcta %}

{% cta https://webcrumbs.org %}Are you a React enthusiast? Check out WebCrumbs{% endcta %}

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91kcbc3ki82ftaihnd3c.jpg)
A Guide to Flutter’s Map Data Structure Functions
Tags: flutter
Published: 2023-11-17 10:52:04

In the realm of Flutter and Dart, the Map data structure is a fundamental tool for handling key-value pairs. This powerful collection type is integral to Dart programming, and mastering it is key to effective Flutter development.

## Understanding Dart Map
Basics of Map Creation
Creating a Map in Dart can be approached in several ways, each catering to different preferences or scenarios.

**1. Using Curly Braces:**

`var mapObj1 = {
  "name": "Alyssa Pham",
  "age": 24,
  "country": "Vietnam",
};`
**2. Using Map() Constructor:**

`var mapObj2 = new Map();
mapObj2["name"] = "Alyssa Pham";
mapObj2["age"] = 24;
mapObj2["country"] = "Vietnam";`
**3. Specifying Data Types:**

`var mapObj3 = Map<String, dynamic>();
mapObj3["name"] = "Alyssa Pham";
mapObj3["age"] = 24;
mapObj3["country"] = "Vietnam";`

## Accessing Map Data
**1. Using Keys:**

`print(mapObj1.keys);
// Output: {name, age, country}`
**2. Explicitly Mentioning Keys:**

`print(mapObj1["name"]);
// Output: Alyssa Pham`

## Dart Map forEach Method
The forEach method is a versatile tool for accessing keys and values in a Map.

`mapObj1.forEach((key, value) {
  print(key);
});
// Output: name, age, country

mapObj1.forEach((key, value) {
  print(value);
});
// Output: Alyssa Pham, 24, Vietnam`

## Advanced Map Operations
**1. Map Entry Access:**

`mapObj1.entries.forEach((entry) {
  print(entry.value);
});
// Output: Alyssa Pham, 24, Vietnam`
**2. Mapping with .map() Method:**

`mapObj1.entries.map((entry) {
  print(entry);
}).toList();
// Output: MapEntry(name: Alyssa Pham), MapEntry(age: 24), MapEntry(country: Vietnam)`

**3. Accessing Using Index:**

`print(mapObj1.keys.elementAt(0));
// Output: name
`

## Declaring Map of Objects

`class Category {
  final String name;
  final Color color;

  Category(this.name, this.color);
}

var _categories = {
  Category("Apple", Colors.red): false,
  Category("Orange", Colors.orange): false,
  Category("Banana", Colors.yellow): false,
};`

## All About Lists

Lists, another essential data structure in Dart, are represented by square brackets. They differ from Maps in that they allow indexing for direct access.

`var ageList = ["35", "39", "27"];
print(ageList[0]); // Output: 35`

## Conclusion
Understanding Maps and Lists is foundational to Dart and Flutter development. Whether you're dealing with key-value pairs in Maps or maintaining ordered collections in Lists, these concepts will empower you to manage and manipulate data effectively in your Flutter applications.

Remember, as you delve deeper into [Flutter app developement](https://bachasoftware.com/technologies/mobile-development/flutter), continual practice and exploration will solidify your understanding of these fundamental data structures.
Complete Website using HTML And CSS | CSS Project
Tags: webdev, tutorial, css, frontend
Published: 2023-11-17 10:51:38

{% embed https://www.youtube.com/embed/HmQMvVhHVKQ?si=AwerkzYhTICg4pmU %}


Website design using HTML and CSS. and few lines of JavaScript
Here in this tutorial, you will learn how to create a beautiful website with HTML and CSS step by step from start to end.  This design has many attractive sections. navigation, home, services, about, etc.  
there are no complex components. Very useful for beginners in the web development field.

I hope you will enjoy it.

If this tutorial is helpful for you,  please like this video and subscribe to my channel to watch more website development tutorials.

image source: pexels.com, flaticon.com

Image download: https://drive.google.com/drive/folders/1izyd7A0jWXQnGiEyOuQR5l_Ztj-OET5r

SOURCE CODE: 
https://linktr.ee/coding.css

➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖

Watch More Web Development Tutorials:
----------------------------------------------
Responsive dashboard using HTML & CSS | Part - 1
https://www.youtube.com/watch?v=cs1TBvpKCxI

3D Flip Product Card | CSS Tutorial
https://www.youtube.com/watch?v=cPsFsENbDho&ab_channel=LearnwithDaniel

➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖


TikTok: https://www.tiktok.com/@codingcss
Instagram : https://www.instagram.com/coding.css/

➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖

If you want to support my channel and see more great content, hit that subscribe button.😍🙏

➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
about channel:
if you are interested to start your web development career - check out the videos on my channel. Starting from basic HTML, CSS, JavaScript, and frameworks - you will find complete web development lessons completely free.

➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
#space_website
#No_Talking_Programming
#portfolio _website
#parallax_website
#login_page

#javascript #html #css #javascriptprojects #js #chatbot #html #css #javascript #css3 #html5 #htmlcss #htmlcssproject #coding #programming #programmer #frondend #webdevelopment #webdesign #website #web  #htmlcssjavascriptproject #htmlcssjavascripttutorial #responsivewebsite #foodwebsite #restaurantwebsite #design

#completewebsite #responsive #flex #grid
Unveiling the Power of Flutter's New Sliver API
Tags: flutter
Published: 2023-11-17 10:45:57

## Understanding Slivers: A Brief Overview
Before delving into the intricacies of Flutter's latest update, let's grasp the concept of slivers. In Flutter, a sliver represents a portion of a scrollable area with specialized behavior. Think of slivers as a detailed tool to precisely control scrolling effects, offering a lower-level interface for fine-grained control over scrollable areas.

All your favorite scrollable views, such as ListView and GridView, are essentially implemented using slivers. Their ability to lazily build each item as it scrolls into view makes slivers particularly efficient for navigating through extensive lists of children.

Introducing SliverMainAxisGroup and SliverCrossAxisGroup
The cornerstone of the new Sliver API lies in two innovative widgets: SliverMainAxisGroup and SliverCrossAxisGroup. These widgets address the long-standing challenge of grouping slivers in a CustomScrollView.

1. 

## [SliverMainAxisGroup](https://api.flutter.dev/flutter/widgets/SliverMainAxisGroup-class.html)
The SliverMainAxisGroup widget allows you to group sliver children sequentially along the main axis. This is achieved by encapsulating various slivers within a SliverMainAxisGroup. Take a look at the code snippet below to understand how this works:

`CustomScrollView(
  slivers: [
    SliverMainAxisGroup(slivers: [
      // Slivers grouped along the main axis
      SliverPersistentHeader(
        delegate: HeaderDelegate(title: 'SliverList'),
        pinned: true,
      ),
      SliverPadding(
        padding: EdgeInsets.all(16),
        sliver: decoratedSliverList(),
      ),
    ]),
    // Additional SliverMainAxisGroup for different sliver content
  ],
),`

In this example, SliverMainAxisGroup organizes slivers sequentially, including a SliverPersistentHeader for creating sticky headers. The pinned: true property ensures that headers remain fixed at the top during scrolling.

2. 

## [SliverCrossAxisGroup](https://master-api.flutter.dev/flutter/widgets/SliverCrossAxisGroup-class.html)
The SliverCrossAxisGroup widget, on the other hand, arranges a list of slivers along the cross-axis. 

`SliverCrossAxisGroup(slivers: [
  SliverPadding(
    padding: const EdgeInsets.all(16),
    sliver: decoratedSliverList(),
  ),
  // Additional SliverPadding entries or other slivers
]),`

This widget efficiently organizes slivers in a linear array along the cross-axis, similar to how rows handle their children.
Architectura Codicis: Mysteria Des Patternorus #0005
Published: 2023-11-17 10:44:41

## Harken, ye scholars of arcane lore and ancient craft, for I, doth present unto thee an opus of yesteryear, wherein the mystic fibres of eldritch wisdom are interwoven with the alchemic strands of modern technomancy. This day, we sojourn through the phantasmal dominion of Des Patternorus, wherein each is not solely a method but an allegory, a spectre that whispereth unto the very spirit of the codex.
---
## The Command: The Grimoire of Imperatives

*Fathom, an thou art able, a grimoire most puissant, within whose leaves lie imperatives arcane, scripted by the sovereign artificer. The Command pattern is an instrument of will, encapsulating edicts that slumber, awaiting the ordained moment to awaken and enact their puissance.*

## The Mediator: The Convocation of Aetheric Concord

*Conjure within thy mind's eye, a convocation ethereal, where emissaries from realms disparate convene, their discourses woven not in discord but through an arbiter transcendent. The Mediator pattern, akin to thee astral assembly, orchestrateth the communion of elements diverse, ensuring that discourse floweth through a singular conduit of harmony.*


## The Chain of Responsibility: The Phalanx of Obligation

*Ponder now a phalanx venerable, each scion bearing aegis upon which the burden and honor are passed in succession. In the Chain of Responsibility, supplications traverse a lineage of stewards, each endowed with the prerogative to act or consign the charge unto the next.*


## The State: The Talisman of Protean Visages

*Envision a talisman, mercurial and inscrutable, its visages transmuting with the whims of the celestials. The State pattern, akin to this mutable relic, transfigures the comportment of an artifact when its inner essence shifteth, unveiling new facets and potencies.*


## The Proxy: The Spectre Warden

*Contemplate, an thou darest, a warden spectral, a phantasmal custodian standing sentinel for the guardian true. The Proxy pattern doth forge a simulacrum or warden for another entity, directing access to it, as doth the ghostly guardian that keepeth its silent vigil.*
Remainder Operator in JS
Tags: react, javascript, webdev, tutorial
Published: 2023-11-17 10:40:53

Hello everyone, in this video i have explained how we can use reminder operator(%) in JS and can utilize its power in a real world projects like creating a tab component in react js

Feel free to give suggestions in comments

THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

You can help me with some donation at the link below Thank you👇👇
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well

{% link https://dev.to/shubhamtiwari909/css-trigonometry-circle-3bl3 %}
{% link https://dev.to/shubhamtiwari909/next-js-multistep-form-2gc9 %}
{% link https://dev.to/shubhamtiwari909/react-components-gallary-3p7b %}
{% link https://dev.to/shubhamtiwari909/react-interactive-components-tabs-48fh %}
Phỉnh Poker là gì? Giá trị thật của đồng chip hiện nay
Published: 2023-11-17 10:34:12

Phỉnh Poker là gì? Giá trị thật của đồng chip hiện nay

Tại sao người chơi poker lại "sắm" cho mình những đồng chip phỉnh? Bài viết sẽ đưa bạn đến với thế giới đầy màu sắc và giải thích tại sao phỉnh trở thành một phần không thể thiếu của bàn poker.




Chia sẻ bài viết và đừng quên thêm hashtag #PhinhPoker để kết nối cùng cộng đồng yêu thích poker trên khắp nơi!

#PokerChip #PhinhPoker #CasinoOnline #BandarTop88

https://bandartop88.com/meo-casino/phinh-poker-la-gi/