Author: Learners Store

error ‘@testing-library/react’ should be listed in the project’s dependencies, not devDependencies

This is an ESLint error

This error comes from the import/no-extraneous-dependencies rule, which expects any module you import in non-test code to be in the regular dependencies section, not in the devDependencies.

To fix this issue, we need to configure ESLint to allow this import. If the file which is throwing this error is only used in tests, update the ESLint configuration file (.eslintrc.js) as follows

rules: {
    'import/no-extraneous-dependencies': 'off'
}

Difference between map and flatmap in javascript with examples.

map() in JavaScript :

  1. map() method creates a new Array by applying a function to each element of the original Array.
  2. map() returns a new Array of the Same Length.
  3. map() does not modify the original Array.

Example of returning an Array : 

const array = [5, 10, 15, 20];
const newArray = array.map(n => n * 2);
console.log(newArray);

Output :

[ 10, 20, 30, 40 ]

Example of returning nested Array Structure :

const array = [5, 10, 15, 20];
const nestedArray = array.map(n => [n, n * 2]);
console.log(nestedArray);

Output : 

[ [ 5, 10 ], [ 10, 20 ], [ 15, 30 ], [ 20, 40 ] ]

Example with null / undefined values in the Array :

const array = ["Hello", null, "World", undefined];
const newArray = array.map(word => word ? [word] : []);
console.log(newArray);

Output :

[ [ 'Hello' ], [], [ 'World' ], [] ]

flatMap() in JavaScript :

  1. flatMap() method first maps each element using a function, then flattens the result by one level.
  2. Applies a function like map()
  3. flattens one level deep of nesting.
  4. useful to remove null/undefined from Array.

Example of returning an Array like map() :

const array = [5, 10, 15, 20];
const newArray = array.flatMap(n => n * 2);
console.log(newArray);

Output :

[ 10, 20, 30, 40 ]

Example of nested structure into a flat Array : 

const array = [5, 10, 15, 20];
const nestedArray = array.flatMap(n => [n, n * 2]);
console.log(nestedArray);

Output :

[ 5, 10, 10, 20, 15, 30, 20, 40 ]

Example with null / undefined values in the Array :

const array = ["Hello", null, "World", undefined];
const newArray = array.flatMap(word => word ? [word] : []);
console.log(newArray);

Ouput : 

[ 'Hello', 'World' ]

NOTE : flatMap() only flattens one level deep.

Recreating the dropped table using Prisma and PostgreSQL

Following command will do a soft reset

npx prisma migrate reset

This command will drop all tables and Recreate Schema with correct column order.

After that, following command will recreate the migration for version control

npx prisma migrate dev --name recreate-tradingdata-table

Steps to Build Offline APK for Real Device – React Native

To test our React Native App in our phone, we can follow the following steps.

STEP 1 : Generate JS Bundle

npx react-native bundle \
--platform android \
--dev false \
--entry-file index.js \
--bundle-output android/app/src/main/assets/index.android.bundle \
--assets-dest android/app/src/main/res

Run the above command in your project root folder. This will pack your code into a static file.

STEP 2: Build the APK

navigate to android folder using this command in terminal.

cd android

Now build a debug APK using gradle

./gradlew assembleDebug

Now you can find the APK file in the following path

android/app/build/outputs/apk/debug/app-debug.apk

Now we can install this APK in our Android phone to test our App.

TypeError: cli.init is not a function – React Native

This error will come while running the following command.

  npm install -g react-native-cli

This happens because react-native-cli is deprecated and not compatible with recent versions of node js. Especially from Node 18 + it throws this error.

To fix this issue first Uninstall react-native-cli using the following command.

npm uninstall -g react-native-cli

use the official CLI as follows

npx @react-native-community/cli init MyApp

Now it will install all the required packages to run the App.