You want to pass a component constructor, not a component instance: import * as React from ‘react’; import { Route, RouteProps } from ‘react-router’; interface Props extends RouteProps { component: React.ComponentType; } const PrivateRoute = ({ component: Component, …rest }: Props) => { return ( <Route {…rest} render={(props) => <Component {…props} />} /> ); }; … Read more
In React, you just write the necessary JavaScript (and potentially build it into a reusable control as you’ll see). It’s very prescriptive and easy to do once you learn the basic patterns (and how they differ from AngularJS). So, in the render function, you’d need to iterate through the list. In the example below, I’ve … Read more
It is possible to use PropTypes.oneOf([null]).isRequired. It should allow null, and nothing else. You can combine that with any other type: PropTypes.oneOfType([ PropTypes.string.isRequired, PropTypes.oneOf([null]).isRequired, ]).isRequired Edit: I just had this prop type fail for me when given a null prop using prop-types 15.7.2, so I’m not sure this works anymore (if it ever did?). I … Read more
Update For 2023: Our answer to this question is quite old, and as of today, for large Enterprise applications, we prefer to do Webpack 5 module federation (which manages the singleton React + ReactDOM + others intrinsically). Although module federation is very new, we are using it in large enterprise applications and it seems to … Read more
You just have to install RN Permissions and make changes to the podfile and info.plist. Depending on what you need the permissions for, you get the pods. If you’re not sure, do them all. You can find the code at https://www.npmjs.com/package/react-native-permissions. There are also some other things you may have to do-those I didn’t talk … Read more
react-redux is the library that is passing these methods to your component as props. dispatch() is the method used to dispatch actions and trigger state changes to the store. react-redux is simply trying to give you convenient access to it. Note, however, that dispatch is not available on props if you do pass in actions … Read more
withTranslation injects the i18n object. import {withTranslation} from ‘../config/next-i18next’; const Home = function Home({ i18n }) { return (<div>{i18n.language}</div>) // —————-^ }; Home.getInitialProps = async () => { return {namespacesRequired: [‘home’]} }; export default withTranslation(‘home’)(Home); Or using Hooks, import {useTranslation} from ‘../config/next-i18next’; const Home = function Home() { const { i18n } = useTranslation(‘home’); return … Read more
The compiler just tells you that this.state.sortCol might not have a value because you have the strictNullChecks flag on. You can first check for its existence: const fName = this.state.sortCol != null ? WidgetTableCols[this.state.sortCol].toLocaleLowerCase() : null; Which will remove the error (but you will then need to deal with the fact that fName can be … Read more
There is a very simple theory to why you should use useMemo to memoize the values passed to the Context Provider. When you pass the value to Context Provider, either as an object or an array like: return <CountContext.Provider value={{state, setCount}} {…props} /> or return <CountContext.Provider value={[state, setCount]} {…props} /> What essentially happens is that … Read more
The useState hook is asynchronous but it doesn’t have a callback api like setState does. If you want to wait for a state update you need a useEffect hook: import React, { useState, useEffect } from ‘react’; export default function Signup() { const [terms, setTerms] = useState(”); const [termsValidation, setTermsValidation] = useState(false); useEffect(() => { … Read more