Posts

Passing array from child to parent component

 To pass the assigned_users array from a child component to its parent component, you need to follow these steps: Create a callback function in the parent component : This function will be responsible for receiving the assigned_users array. Pass the callback function to the child component as a prop : The child component can then call this function when it wants to send the assigned_users array to the parent. Call the callback function from the child component : Inside the child component, when you want to send the data to the parent (e.g., after updating assigned_users ), you call the callback function with the updated array. Parent Component jsx Copy code import React , { useState } from 'react' ; import ChildComponent from './ChildComponent' ; const ParentComponent = ( ) => { const [assignedUsers, setAssignedUsers] = useState ([]); // Callback function to update the parent state const handleAssignedUsersChange = ( users ) => { setAssig
Post a Comment
Read more

useCallback hook in React

`useCallback` is a useful hook for optimizing performance in React applications by preventing unnecessary re-creations of functions. However, you should use it wisely, as it can add complexity and may not always offer a performance improvement in every case. ### 1. **What does `useCallback` do?** `useCallback` returns a memoized version of the callback function that only changes if one of the dependencies has changed. It’s primarily used when passing a function as a prop to child components or using it in an effect (like `useEffect`), where unnecessary re-creations of the function can lead to performance problems. ### 2. **Syntax:** ```javascript const memoizedCallback = useCallback(() => {   // Your callback code }, [dependencies]); ``` - The first argument is the function you want to memoize. - The second argument is an array of dependencies (like `useEffect`). The function will only be re-created if any of these dependencies change. ### 3. **When to use `useCallback`?** You shoul
Post a Comment
Read more

Implement a real-time, interactive map

 Implement a real-time, interactive map showing bin locations and status, with color coding to indicate levels (e.g., green for low, red for high). 1. Set Up the Frontend Map Choose a Mapping Library : Use a library like Leaflet.js (open-source and lightweight) or Google Maps API (feature-rich but has usage limits). For example, Leaflet can be integrated with a CDN or npm: < link rel = "stylesheet" href = "https://unpkg.com/leaflet/dist/leaflet.css" /> < script src = "https://unpkg.com/leaflet/dist/leaflet.js" > </ script > https://leafletjs.com/examples/quick-start/ Initialize the Map : Set up a base map centered on the target area (e.g., a city). const map = L. map ( 'map' ). setView ([latitude, longitude], zoomLevel); L. tileLayer ( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' , { maxZoom : 19 , }). addTo (map); 2. Backend: Store and Retrieve Bin Data Bin Database : Each bin entry should store at least
Post a Comment
Read more

React useState

 In React, the setState function is essential for updating the component state. Here are various usage patterns for setState , primarily focusing on functional components with hooks (like useState ), but also touching on class components. 1. Basic State Update In a functional component, you can use setState to update a simple piece of state: const [count, setCount] = useState ( 0 ); const increment = ( ) => { setCount (count + 1 ); }; 2. Functional Update When the new state depends on the previous state, use a functional update: const increment = ( ) => { setCount ( prevCount => prevCount + 1 ); }; 3. Updating Multiple State Variables If you have multiple pieces of state, you can update them separately: const [count, setCount] = useState ( 0 ); const [name, setName] = useState ( "" ); const updateCount = ( ) => { setCount (count + 1 ); }; const updateName = ( newName ) => { setName (newName); }; 4. Using an Object to Manage Sta
Post a Comment
Read more

VS code shortcut

Wrap with div  In VS Code, you can wrap content with a div using the Emmet abbreviation. Here’s the shortcut to achieve that: Highlight the content you want to wrap. Press Ctrl + Shift + P (or Cmd + Shift + P on Mac) to open the Command Palette. Type Emmet: Wrap with Abbreviation and select it. In the input field that appears, type div and press Enter . This will wrap the selected content with a <div> tag.
Post a Comment
Read more

Spatie User Roles

use Spatie\Permission\Traits\ HasRoles ;   This is the trait need to use syncRole  hasRole    Usage: $user = JwtAuth :: user ();         if ( $user -> hasRole ( 'manager' )) {             $user -> syncRoles ([]);         }         $user -> assignRole ( 'user' );
Post a Comment
Read more

Setting up a development environment with PHP, MySQL, Nginx, Composer, Node.js, npm, Laravel, and React

 Setting up a development environment with PHP, MySQL, Nginx, Composer, Node.js, npm, Laravel, and React involves several steps. Here’s a step-by-step guide to get you up and running: ### 1. Install PHP 1. **For Windows:**    - Download the PHP binaries from [PHP's official website](https://windows.php.net/download/).    - Extract the files and add the directory to your system's PATH environment variable.    - Open Command Prompt and type `php -v` to verify the installation. 2. **For macOS:**    - Use Homebrew to install PHP:      ```bash      brew install php      ```    - Verify the installation:      ```bash      php -v      ``` 3. **For Linux:**    - Use your package manager. For Debian-based systems (like Ubuntu):      ```bash      sudo apt update      sudo apt install php php-cli      ```    - Verify the installation:      ```bash      php -v      ``` ### 2. Install MySQL 1. **For Windows:**    - Download and install MySQL from [MySQL's official website](https://dev.m
Post a Comment
Read more