Posts

Show and Hide a button on clicked column in React

  import React , { useEffect , useState } from "react" ; import dayjs from "dayjs" ; import { toWords } from "number-to-words" ; function Billprocess2 ({ dailyworks , trainer , timeframe , rateperhr }) {   const [ topics , setTopics ] = useState ([]);   const [ today , setToday ] = useState ([]);   const [ totalTime , setTotalTime ] = useState ( 0 );   const [ increaseFontIcon , setIncreaseFontIcon ] = useState ( 'hidden' );   const [ clickedRow , setClickedRow ] = useState ( null );   const [ txtsize , setTxtsize ] = useState ( '14px' );   const handleHover = ( rowindex ) => {     setClickedRow ( rowindex )     setIncreaseFontIcon ( increaseFontIcon === 'block' ? 'hidden' : 'block' );   }   const DecreaseFont = () => {     let temp = txtsize . split ( 'p' );       temp = parseInt ( temp [ 0 ]) - 1 ;       setTxtsize ( temp + 'px' );   }   ...

Convert Camel Case in React

//////////First Method    const ConverCamelCase = ( sentence ) => {       return  sentence       .toLowerCase()       .replace(/[^a-zA-Z0-9 ]/g, '')           // Remove any non-alphanumeric characters       .split(' ')       .map((word, index) => index === 0 ?           word : word.charAt(0).toUpperCase() + word.slice(1))       .join(' ');   } //////////// Second Method   const ConverCamelCase = ( sentence ) => {       return   sentence       . toLowerCase ()       . replace ( / [^ a-zA-Z0-9 ] / g , '' ) // Remove any non-alphanumeric characters       . split ( ' ' )       . map (( word , index ) =>           word . charAt ( 0 ). toUpperCase () + word . slice ( 1 ))       ....

Dynamically Change width and height of Div using CSS and React

         const [ size_w , setSize_w ] = useState ( '210mm' );      const [ size_h , setSize_h ] = useState ( '297mm' ); /////////////   const changelayout = () => {             const temph = size_h === '210mm' ? '297mm' : '210mm' ;             const tempw = size_w === '297mm' ? '210mm' : '297mm'             setSize_h ( temph );             setSize_w ( tempw );     } //////////////////// < button className = "bg-blue-500 text-white px-4 py-2 mr-2 rounded" onClick = { changelayout } > Change Layout </ button > ////////////// < div ref = { contentToPrint } id = "printable-content" style = { { width : size_w , height : size_h } } className = "print-content p-4 bg-white" > </div>

Convert Object to Array in JavaScript

 https://www.linkedin.com/pulse/7-ways-convert-objects-array-javascript-awais-al-waisy

Manage Dynamically Created Component in React

Dailywork.js ////////////////////////////////// import React ,{useState, useEffect} from "react"; import axios from "axios"; import Dailyworkdetails from './Dailyworkdetails' import Reacttoexcel from "./Reactttoexcel"; import dayjs from "dayjs"; function Dailywork(){     const [holyday,setHolyday]=useState([])     const [batchinfo,setBatchinfo]=useState([])     const [coursehinfo,setCourseinfo]=useState([])     const [filterbatchDetails,setFilterbatchDetails]=useState([])     const [selectedCourse, setSelectedCourse] = useState("");     const [selectedBatch, setSelectedBatch] = useState("");     const [tempbatch,setTempbatch]=useState()     useEffect(()=>{         axios.get('http://127.0.0.1:8000/batchlist/')         .then((res)=>{setBatchinfo(res.data);})         .catch((error) => {             console.error("...

Convert List to string in React

 1.  const myList = [ 'apple' , 'banana' , 'orange' ]; const myString = myList. join ( ', ' ); // Join array elements with ', ' console . log (myString); // Output: "apple, banana, orange" 2. const myList = [ 'apple' , 'banana' , 'orange' ]; const myString = myList. toString (); console . log (myString); // Output: "apple,banana,orange"

Duration between two time in react||JavasScript

    if ( startTime . ampm === endTime . ampm ){           if(startTime.hr>endTime.hr||((startTime.hr===endTime.hr)&&startTime.min>endTime.min))              {               alert("Select Proper Value")              }              else{               var h1=endTime.hr-startTime.hr               if(startTime.hr===endTime.hr){                 var m1=parseInt(endTime.min-startTime.min)               }               else{                 var m1=parseInt(endTime.min)+parseInt(60-startTime.min)               }              ...