Develop Reference

React JS, props validation

New to React JS, props validation practise as follows:
import React from 'react';
import PropTypes from 'prop-types';
class App extends React.Component {
render() {
return (
<div>
<h3>String : {this.props.propstring}</h3>
</div>
);
}
}
App.propTypes = {
propstring : PropTypes.string
}
App.defaultProps = {
propstring : "My Name"
}
export default App;
import React, { component } from 'react';
import ReactDOM from 'react-dom';
import App from './AppProp.js';
ReactDOM.render(<App />,document.getElementById('root'));
Getting an error as:
TypeError: Class extends value undefined is not a constructor or null.
What am I missing here and how can I resolve the above error?

There are 2 possible problems. Most probably you're importing { component }(like you do in your index file, which is wrong), instead of { Component } somewhere in your code and trying to extend component which doesn't exist.
The other reason is that you might be circularly importing classes, but I doubt it. Also, is your file called AppProp.js?
Post the stack trace and it would also help if you post all the components you're using. Post your package.json as well, as you might be using wrong absolute paths.

The code is perfectly fine. I executed it on my local machine and it ran fine.
The only issue you may be facing is to with
circularly importing classes, which is apparently a limitation
Know more from the resource:
https://esdiscuss.org/topic/how-to-solve-this-basic-es6-module-circular-dependency-problem

RTL's TypeError: _react2.screen.getAllBy is not a function

In my project I am successfully using render and screen from #testing-library/react, However everytime I do screen.getAllBy or screen.getByRole or anything else other than getByText I am getting such errors. One of them was,
typeerror: _react2.screen.getAllBy is not a function
This occurred upon the usage of screen.getAllBy.
My imports includes,
import React from 'react';
import { render, screen } from '#testing-library/react';
import { BrowserRouter } from 'react-router-dom;
import TestComponent from './TestComponent';
Am I missing an import or is there something wrong with my code?
it (`Testing Component`, () => {
render(<BrowserRouter><TestComponent /></BrowserRouter>
expect(screen.getAllBy('li')).toBeInTheDocument();
});

getAllBy is just one of the variants of the queries. Complete query would be getAllByLabelText, getAllByRole etc. Check the react-testing-library docs about Queries.

React native navigation (undefined is not an object .. this.props.navigation.navigate

I have a trouble regarding this issue on react native navigation by the way I am using redux.
Listserviceaction.js
contains webservicecall component is being imported here
import ListComponent from '../components/ListComponent';
Listactiontype.js
contains action ActionTypes
export const SERVICE_PENDING = 'service_pending' and etc.
listcomponent.js
the component, renders data on a list etc
reducers
and then the reducer Part
scenes/List.js
store binding will be done within the initial point of the application and passed down to the other application components as shown below.
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import store from '../reducers/index';
import ServiceAction from '../actions/listserviceaction';
import { Container, Content, Picker, Button, Text } from "native-base";
export default class RenderList extends Component {
render() {
return (
<Provider store={store}>
<ServiceAction />
</Provider>
);
}
}
now after the component is being loaded and when i click onPress={() => this.props.navigation.navigate("ProfileScreen")} on my
listcomponent it fires an error (undefined is not an object .. this.props.navigation.navigate) any problem ? any better solution?
Thank You.

Include on your ServiceAction the this.props.navigation something like this:
<ServiceAction navigation={this.props.navigation}/>
because the props.navigation are by default on your parent component
and on ServiceAction component you will access to navition like:
..
goToSignUp() {
this.props.navigation.navigate('SignUp');
}
..
For me also was confusing before. Cheers!

for navigating from one screen to other, both the screens should be in StackNavigator. Can you please show your stacknavigator and code of the screens you are trying to navigate between.

for using react navigation you must do this steps:
1: npm i react-navigation --save
2: npm link react-navigation
3: modify a top level class for your stack like this :
import page_1 from 'YOUR_PAGE1_PATH'
import page_2 from 'YOUR_PAGE2_PATH'
import { createStackNavigator } from 'react-navigation'
export default createStackNavigator({
p1 : page_1 //remember the first modified shown first
p2 : page_2
})
then in page_1 if you want to navigate to page 2 :
onPress(()=> this.props.navigation.navigate('p2' , 'maybe other params'))
Note : you must call p1,p2 instead of page_1 or page_2!

You must pass a component to the function returned by connect. Instead received undefined

The code below gives
Uncaught Error: You must pass a component to the function returned by connect. Instead received undefined
List.js
import React from 'react';
import { connect, bindActionCreators } from 'react-redux';
import PostList from '../components/PostList'; // Component I wish to wrap with actions and state
import postList from '../Actions/PostList' //Action Creator defined by me
const mapStateToProps = (state, ownProps) => {
return state.postsList
}
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({"postsList":postList},dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(PostList);
PostList.js
import React from 'react'
export const PostList = (props) => {
return <div>List</div>
}
Please help me with a solution?

You are doing import PostList from '../components/PostList'; so you need to use export default in your PostList.js file.
Otherwise you need to do import { PostList } from '../components/PostList';.
To whoever is interested, here is a nice article about es6 import/export syntax: http://www.2ality.com/2014/09/es6-modules-final.html

Not related to the asker specifically, but if you're facing this error, it's worth to check if you have the connect() syntax right:
const PreloadConnect = connect(mapStateToProps, {})(Preload);
export default PreloadConnect;
Note that Preload, is passed as a IIFE parameter.

More details can be found here.
There might be three reasons, that are summarized as follows:
Circular dependencies between components
Wrong usage of export and export default then imported the wrong way
Used the connect function wrongly, passed the wrong parameters
In my case is was Circular dependencies, and the circular-dependency-plugin helped me fix it.

In my case it was Expo server that sometimes doesn't catch filesaves on Windows (probably) and it was seening old version of the component I've tried to connect (I had no export there yet probably). Re-saving my component without really touching anything fixed the issue.
Restarting Expo server with cleaned cache would probably help as well.

In my case, it was because of the usage of enums (TypeScript).
Try without enums in your code.
Reason : Enums can go undefined during runtime.
Link to Related Question
Hope it solves your problem :)

React JSX file giving error "Cannot read property 'createElement' of undefined"

I have a file test_stuff.js that I am running with npm test
It pretty much looks like this:
import { assert } from 'assert';
import { MyProvider } from '../src/index';
import { React } from 'react';
const myProvider = (
<MyProvider>
</MyProvider>
);
describe('Array', function() {
describe('#indexOf()', function() {
it('should return -1 when the value is not present', function() {
assert.equal(-1, [1,2,3].indexOf(4));
});
});
});
Unfortunately, I get the error
/Users/me/projects/myproj/test/test_stuff.js:11
var myProvider = _react.React.createElement(_index.MyProvider, null);
^
TypeError: Cannot read property 'createElement' of undefined
at Object.<anonymous> (/Users/me/projects/myproj/test/test_stuff.js:7:7)
What does that mean? I am importing React from 'react' successfully, so why would React be undefined? It is _react.React, whatever that means...

To import React do import React from 'react' You add brackets when the thing you are importing is not the default export in that module or file. In case of react, it's the default export.
This might apply to your other imports depending on how you defined them.

import React, { Component } from 'react'
This worked for me. I'm not sure why it fixed my version of this issue, though. So if you are someone who stumbled upon this problem and you use create-react-app as your starting boilerplate, this way of importing React will do the trick. (as of Oct '18, lol)

For those who are working ReactJS with TypeScript.
import * as React from 'react';

This error occured to me due to carelessness. It's actually
import React from 'react';
Brackets are for named exports such as this:
import React, { useState, useEffect } from 'react';

This issue occurred while importing React from react, I placed it inside curly brackets.
Please do this:
import React, {useState} from "react";
Instead of:
import {React, useState} from "react";

Trying to use destructor for importing the React object may cause you problems like this import {React} from 'react';.
This might be the cause of the error 90% of the time running this code above.
rather use:
import React from 'react';
And then you can access any member of the React class via:
React.

Change:
import { React } from 'react' to import React from 'react'
Because React is a default export and you don’t need curly braces for any default exports.

If in case you need to import multiple classes from 'react', you can have an alias for them except React. Something like,
import React, * as react from 'react';

React is exported by default in that module, no need {}.

I got this when trying to mock a component when unit testing but was not setting it up correctly
What I was doing that caused the error:
jest.mock("./SomeComponent", () => {
return <div>MockSomeComponent</div>
});
What I needed to do:
jest.mock("./SomeComponent", () => {
return () => <div>MockSomeComponent</div>
});

This error can be occured due to carelessness. Please add
import React from 'react'
It will be resolved after that