Skip to main content

Posts

Showing posts from June, 2022

Search filter data in React js using map filter().

 Code is below: import React , { useState } from 'react' import MOCKDATA from './../data/MOCK_DATA.json' ; function SearchData () {     const [ searchTerm , setSearchTerm ] = useState ( '' )   return (     < div >         < h1 > SearchData </ h1 >         < input placeholder = 'Search...' type = "text" className = 'searchInput'         onChange = { ( e ) => { setSearchTerm ( e . target . value )} }         />         { MOCKDATA . filter (( val ) => {             if ( searchTerm == "" ){                 return val ;             } else if ( val . first_name . toLowerCase (). includes ( searchTerm . toLowerCase ())) {                 return val ;         ...

create fake data in json format

 There is website that use to create fake data. The special thing about this website you can create your own data on that wbsite and use on your site. You can create create data in any format like CSV file, json format etc. website: https://mockaroo.com/

Create and Use Dynamic Laravel Subdomain Routing

  Web Development Create and Use Dynamic Laravel Subdomain Routing   Mokhtar Ebrahim   Published:  May 20, 2017   Last updated:  June 2, 2020 Many websites give their users a custom subdomain for their profiles or pages, so the user can access his profile at http://username.website.com, which is much better. In this post, we will see how to make dynamic Laravel subdomain routing efficiently.   Configure DNS To do this trick, you need to have access to the  DNS server  settings and  apache web server  settings. First, you need to add an  A record  with an asterisk for the subdomain like this: *              IN          A             192.168.1.5 You should replace the IP address with your IP address.   Configure web server Open Apache web serv...

Create unique name, string, character using UUID uuid package

  This package is use create unique strings, id, characters. this is helpfull in indentifing the sigle record either in json server db or in real time database. Command to intall it, npm install uuid

Crud operation with firebase in react js

React with Firebase 1. Install firebase using command npm i firebase it will include all the stuff need to connect with firebase firestore database. After that go to firebase website 2) Register your App Add firebase SDK in you project // Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app" ; import { getAnalytics } from "firebase/analytics" ; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = {   apiKey : "AIzaSyCCrfZjlVpghgvbX0MTfIydQnbFtkOZvjUw" ,   authDomain : "crud-reactjs-92ddb.firebaseapp.com" ,   projectId : "crud-reactjs-952ddb" ,   storageBucket : "crud-reactjs-92ddb.appfspot.com" ,   messagingSenderId : "13233136550278" ,   appId : ...

React js Commands

Navigation   1. Install React Router Dom npm install react-router-dom npm install react-router-dom@6

To DO List in React js

  This is simple react js application. to show you the how to add task item in list array and show in separate component. Set 1 InSide App. js file import { useState } from " react "; import " ./styles.css "; import Task from " ./Task "; export default function App () { const [name, setName] = useState ( "" ); const [time, setTime] = useState ( "" ); const [list, setList] = useState ([]); const addtask = () => { setList ([...list, { task : name, time : time } ]); setName ( "" ); setTime ( "" ); } ; return ( < div className = " App " > < h1 >To do list</ h1 > < label >Name: </ label > < input type = " text " onChange = {(e) => { setName ( e . target . value ); } } value = {name} /> < br /> < br /> ...

List, Ternary Operator and Array Destruction in react js