Develop Reference

How_To_Solve_ReactJS_Problem

Sorry for my bad english and a new learner programming.
I have a single problem with React.JS in App.js,
I have written an exterrnal JS file, called Fundamental.js, the code is the following:
const testing = () => {
console.log('test log 12456');
}
export default testing;
When I import Fundamental.js file into App.js, my VS Code shows a popup message:
'testing' is defined but never used.
how to solve it?
the import list in my React App.js is:
import logo from './Linux_Logo.png';
import './App.css';
import testing from './FundaMental';
Thank you so much to whoever solves my problem!

Welcome to SOF. In your component testing should be Testing [capitalized] and In testing nothing is returned that's why showing this in the terminal. Try this plz:
import React from 'react';
function Testing() {
return (
console.log('test log 12456');
)
}
export default Testing
when importing:
import Testing from './FundaMental';
It is better to keep the same name of the function name and the js file name.

VS Code is saying that you imported a function but you're not using it.
Your testing module defines the function testing. It doesn't execute it.
There are two ways to get rid of the warning:
Call the testing function in App.js, or
Don't import it into App.js.
If testing is the beginning of a React component then follow #Pabel Mahbub's answer, including the suggestion to rename the function Testing and rename the file Testing.js. As your app grows that will make it easier to manage.

This is only a warning/reminder that you import something but you never used it. React has this kind of checking that will warn us of the unusual code that we have. To fix this warning either trigger the function or remove it. Hope this helps!

Jest and React Testing Library returning undefined error when using React.Children in a component

I have a component that uses React.Children internally to do some changes to the children components when rendering it. When I try to test it using Jest and React Testing Library, I get the error TypeError: Cannot read properties of undefined (reading 'Children'), and it points to the line where I'm using React.Children.map.
I tried to write a simple component to see if it was a problem on the more complex component, but it seems to be happening as well. Here's the test component I created:
import React from 'react';
export default function Testing({ children }) {
return <div>{React.Children.map(children, (child) => child)}</div>;
}
And here's the test:
import { render } from '#testing-library/react';
import Testing from './Testing';
describe('Home', () => {
it('should render successfully', () => {
const { baseElement } = render(<Testing>Testing</Testing>);
expect(baseElement).toBeTruthy();
});
});
And here's the returned error:
detail: TypeError: Cannot read properties of undefined (reading 'Children')
at Testing (/Users/user/projects/my-project/src/features/Home/Testing.tsx:4:22)
I tried importing React into the test to see if it would make a difference, but I doesn't. I also tried to look for this on both Jest and React Testing Library docs, but I couldn't find anything. I also couldn't find references to this problem on the internet, which is a bit strange as I believe I'm not the first one who's testing components that uses React.Children internally.
Any help would be welcomed! Thanks!

Its because children is undefined. Try by using React?.Children?.map(children, (child) => child)in your code

Uncaught SyntaxError: Unexpected token ':' with Webpack + TypeScript + React Redux

I configured my simple webapp to build and run a WDS with TypeScript + React. It builds and shows the page properly.
Then, I am trying to add Redux and when I do a simple thing like importing useDispatch and trying to call it from my functional component, it builds but shows the error in browser console:
Uncaught SyntaxError: Unexpected token ':'
The code is:
import { useDispatch } from 'react-redux'
const MyView = () =>{
const dispatch = useDispatch()
...
}
And the page shows nothing.
When I look into the source of the error, I see it's definitely not good because tries to access {...}.somValue which should be something like ({...}).somValue to not cause the error.
Is it something I can fix by changing webpack config? I only use ts-loader, without any babel stuff.

Seems like I had a wrong value in webpack config file, or at least removing it helped:
Was mode: "none"
I just removed the whole key and value and it worked.

How do I use hook navigation in interceptor response?

I am having big troubles using useNavigation() in an interceptor response.
First of all, i had to created a new file where i put my function with the navigation.
NavigateError
import React, {useEffect, useState} from 'react';
import {useNavigation, CommonActions} from '#react-navigation/native';
export const NavigateToLogin = () => {
console.log('ENTERS THE FUNCTION ------------');
const navigation = useNavigation();
navigation.navigate('Indexv2');
}
and then i imported it where i have my interceptor response
import {NavigateToLogin} from './navigateError';
and finally use it.
interceptor response
case 403:
//Alert.alert('Error 403', 'Servidor bloqueado');
NavigateToLogin();
console.warn('Error 403, Servidor bloqueado');
The problem is that i got a invalid hook errors. I dont know how to deal with this issue.
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app

No-unused-expressions error keeps recurring at script import in React

Complete error:
Expected an assignment or function call and instead saw an expression no-unused-expressions
The error comes from this line of code, the import statement
componentDidMount() {
import('./app/js/cursor')
}
Was looking for common cases and suggested solutions are to add rules to ESLint config, but did not work for me.
Somebody ideas why this error keeps occurring?
Also, script import in a different way such as below is no solution
const script = document.createElement("script");
script.src = "./app/js/cursor";
script.async = true;
document.body.appendChild(script);
Because this returns me the following error
Uncaught SyntaxError: Unexpected token '<'
Thanks in advance!

You are not supposed to import anything inside componentDidMount() as far as I know. Put your import on top of the file. I think the error here is correct as you are trying to call a function to import that file and you are not supposed to do it inside componentDidMount(). The other import is not React related but pure JavaScript solution so it doesn't work here. Or it could, but I don't recommend doing it. Just move your import on top of the file.