reactjs code snippets

1. Super & Super(props)

Super():

This is required when we need to access some variables of parent class.

Props:

Used for passing data from one component to another.

Props data is read-only, which means that data coming from the parent should not be changed by child components.

Explanation:

If we want to use this.props inside the constructor we need to pass it with the super() function. Otherwise, we don’t want to pass props to super() because of this.props are available inside the render function

CodeSandbox example

Example:

import React from "react";

class MyComponent extends React.Component {
    constructor(props) {
        //super(props);
        console.log(props);
        console.log(this.props);
    }

    render() {
        return <div>Hello | {this.props.title}</div>; // Defined
    }
}

export default MyComponent;

2. How to set default props in React

import React from 'react';

class CustomButton extends React.Component {
  render() {
    return (
      <button style={{color: this.props.color}}>Hello World</button>
    );
  }
}

// Setting default value for props
CustomButton.defaultProps = {
  color: 'blue'
};


export default class App extends React.Component {
  render() {
    return (
      <div>
        <CustomButton /> {/* props.color will be set to default blue */}
        <CustomButton color="green"/> {/* props.color set to green */}
      </div>
    );
  }
}

3 IndexedDB Example

import React from 'react';
import { openDB } from 'idb';

const DB_NAME = 'my-db';
const STORE_NAMES = {
	store1: 'my-store-1',
	store2: 'my-store-2',
};

const openDatabase = async () => {
	const db = await openDB(DB_NAME, 1, {
		upgrade(db) {
			Object.values(STORE_NAMES).forEach((storeName) => {
				db.createObjectStore(storeName, { keyPath: 'id', autoIncrement: true });
			});
		},
	});
	return db;
};

const addData = async (storeName, data) => {
	const db = await openDatabase();
	const tx = db.transaction(storeName, 'readwrite');
	tx.objectStore(storeName).put(data);
	await tx.done;
};

const getData = async (storeName, key) => {
	const db = await openDatabase();
	const tx = db.transaction(storeName, 'readonly');
	const result = await tx.objectStore(storeName).get(key);
	return result;
};

const deleteData = async (storeName, key) => {
	const db = await openDatabase();
	const tx = db.transaction(storeName, 'readwrite');
	tx.objectStore(storeName).delete(key);
	await tx.done;
};

const App = () => {
	const handleAddData = () => {
		addData(STORE_NAMES.store2, { id: '7', name: 'Singh' });
	};

	const handleGetData = async () => {
		const result = await getData(STORE_NAMES.store2, '7');
		console.log(result);
	};

	const handleDeleteData = () => {
		deleteData(STORE_NAMES.store1, '7');
	};


	return (
		<div>
			<button onClick={handleAddData}>Add data to store1</button> <br />
			<button onClick={handleGetData}>Get data from store1</button> <br />
			<button onClick={handleDeleteData}>Delete data from store1</button> <br />
		</div>
	);
};

export default App;