DEV Community: SM Toufiqul Hoque

Drop down filtering with react

SM Toufiqul Hoque — Sat, 26 Feb 2022 10:55:18 +0000

Our goal is to change our data dynamically using Drop down filtering here is the code ...

import React, { useState } from 'react';
import mockData from '../mockData.json';


const Dropdown = () => {
  const [items, setItems] = useState(mockData);

   const filterItem=(gen)=>{
     const updatedItem=mockData.filter((curElem)=>{
       return curElem.gender===gen
     });
     setItems(updatedItem)

   }
  return (
    <div>

        <select onChange={(e) => filterItem(e.target.value)}  > 
          <option >Female</option>
          <option>Male</option>

        </select>


        {items.map(val => (
          <div key={val.id} style={{ margin: '30px' }}>
            <div>{`Band: ${val.first_name}`}</div>
            <div>{`Albums: ${val.last_name}`}</div>
            <div>{`Members: ${val.email}`}</div>
            <div>{`Members: ${val.gender}`}</div>

          </div>
        ))}
      </div>
  );
}

export default Dropdown;

Redux Toolkit Quick Start

SM Toufiqul Hoque — Fri, 25 Feb 2022 06:08:17 +0000

Redux

It was first introduced to the front-end world in 2015 by Dan Abramov and Andrew Clark as a revolutionary state management library. It is now one of the most popular state management libraries on the web.
Redux is a front-end component state management system, which makes managing multiple component states easier for complex apps. React, Angular, or Vue provide components that internally manage their own states.

Redux Toolkit

I have used the Redux toolkit in my projects. Because it is easy to use and It is also easily maintainable and scalable . Also, there are many other benefits such as efficient testing, easy debugging and better performance that Redux brings to the table.

Redux Toolkit Installation

Step 1: install packages

Create a React Redux App

npx create-react-app my-app --template redux

Add the Redux Toolkit and React-Redux packages to your existing project:

npm install @reduxjs/toolkit react-redux

Step 2: Create a Redux Store

Create a file named src/redux/store.js. Import the configureStore API from Redux Toolkit. We'll start by creating an empty Redux store, and exporting it:

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {},
})

Step 3: Provide the Redux Store to React

Once the store is created, we can make it available to our React components by putting a React-Redux around our application in src/index.js. Import the Redux store we just created, put a around your , and pass the store as a prop:

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { store } from './app/store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Step 4: Create a Redux State Slice

Create a file named src/redux/slices/foodSlice.js.

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

Step 5: Add Slice Reducers to the Store

On the src/redux/store.js path add Slice reducers to the store

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
})

CRUD Operation

SM Toufiqul Hoque — Thu, 23 Dec 2021 17:02:32 +0000

CRUD Operation

Working with CRUD operations we have to work with a database. CRUD operations are often used with SQL and also No SQL, a topic we've covered in depth. Since SQL is so prevalent in the development community, people should understand how CRUD operations work.

Definition of CRUD

The acronym CRUD refers to the four basic functions of persistent storage, including create, read, update, and delete. Also, each letter in the acronym can refer to all functions executed in relational database applications and mapped to a standard HTML method, SQL statement and NoSQL statement or DDS operation

Explaining CRUD Operations

When we need to keep the track of customer data,account, payment information, health
Data, and other records require data storage hardware and applications that provide persistent storage.There are many types of databases: hierarchical databases, graph databases, and object-oriented databases to name a few. The most commonly implemented type of database is a relational database, which consists of data tabled in rows and columns and connected to other tables with complementary information by a system of keywords that includes primary keys and foreign keys.And we use another database which is NoSQL database.

Four CRUD Operations Components Explained (NoSQL)

There are four CRUD operation components :

Create Operations

Read Operations

Update Operations

Delete Operations

Create Operations
Add new documents to a collection. If the collection does not exist, insert operations will create the collection.
MongoDB provides the following methods to insert documents into a collection:
db.collection.insertOne() New in version 3.2
db.collection.insertMany() New in version 3.2
In MongoDB, insert operations target a single collection. All write operations in MongoDB are atomic on the level of a single document.

Read Operations
Read Operation read the documents from a collection:

In MongoDB, insert operations target a single collection. All write operations in MongoDB are atomic on the level of a single document.
Update Operations
In MongoDB, insert operations target a single collection. All write operations in MongoDB are atomic on the level of a single document.
In MongoDB, insert operations target a single collection. All write operations in MongoDB are atomic on the level of a single document.

db.collection.updateOne() New in version 3.2
db.collection.updateMany() New in version 3.2
db.collection.replaceOne() New in version 3.2

You can specify criteria, or filters, that identify the documents to update. These filters use the same syntax as read operations.

Delete Operations
Delete operations remove documents from a collection. MongoDB provides the following methods to delete documents of a collection:
db.collection.deleteOne() New in version 3.2
db.collection.deleteMany() New in version 3.2
In MongoDB, insert operations target a single collection. All write operations in MongoDB are atomic on the level of a single document.
You can specify criteria, or filters, that identify the documents to remove. These filters use the same syntax as read operations.

State-Props

SM Toufiqul Hoque — Wed, 22 Dec 2021 17:44:36 +0000

State

States are allowed to create and manage their own data. So unlike props , state can not pass data with state, but they can create and manage it internally.

class Test extends React.Component {    
    constructor() {    
        this.state = {          
            name: "Toufiq"    
        };  
    }    
    render() {    
        return (      
            <div>             
              <p>{this.state.name}</p>      
            </div>    
        );  
    }
}

There is nothing useful going on in this case, but imagine doing something different based on the prop value, maybe setting a state value would be better.

A child component should never change its properties, so if something changes a variable, it should belong to the component state.

Child components can also use props to gain access to methods in the parent component. This is a good way to centralize management of state in the parent component and avoid children from having to manage their own state.

State should not be modified directly, but it can be modified with a special method called setState( ).

this.state.id = “hello”; // wrong

this.setState({         // correct  
    id: "hello"
});

Props
Props used to pass data between React components. React data flow between component is unidirectional(from parent components to child components)

Example

class pComponent extends Component {    
    render() {    
        return (        
            <cComponent name="First Child" />    
        );  
    }
}

const cComponent = (props) => {    
    return <p>{props.name}</p>; 
};

DEV Community: SM Toufiqul Hoque

Drop down filtering with react

Redux Toolkit Quick Start

Redux

Redux Toolkit

Redux Toolkit Installation

Step 1: install packages

Step 2: Create a Redux Store​

Step 3: Provide the Redux Store to React

Step 4: Create a Redux State Slice

Step 5: Add Slice Reducers to the Store

CRUD Operation

State-Props

Step 2: Create a Redux Store