higher-order-components

I have a higher-order component FormBuilder like this: const FormBuilder = (WrappedComponent) => { return class HOC extends React.Component { clearForm() { // ... } render() { return ( <Form onSubmit={//what do I say here?!}> <Form.Input placeholder='Name' name='name' /> <WrappedComponent clearForm={this.clearForm} /> <Form> ); } } } And here is the WrappedComponent NewPizzaForm : class WrappedComponent extends React.Component { onSubmit() { // sends a POST request to the backend, then this.props.clearForm() } render() { return ( <Form.Button>Add Pizza</Form.Button> ); } } const NewPizzaForm =

I have a generic React component, say like this one: class Foo<T> extends React.Component<FooProps<T>, FooState> { constructor(props: FooProps<T>) { super(props); render() { return <p> The result is {SomeGenericFunction<T>()}</p>; } } I also have a HOC that looks similar to this one (but is less pointless): export const withTd = <T extends WithTdProps>(TableElement: React.ComponentType<T>): React.SFC<T> => (props: T) => <td><TableElement {...props}/></td>; But when I use a component like this: const FooWithTd = withTd(Foo); There is no way to pass the type argument, as you can do neither

I have a problem to prevent unauthorized users from accessing authorized-only routes/components - such as logged in users dashboard I have the following code: import React from 'react' //other imports import {withRouter} from 'react-router' class User extends React.Component { constructor(props) { super(props) console.log('props', props) let user = JSON.parse(localStorage.getItem('userDetails')) if(!user || !user.user || props.match.params.steamId !== user.user.steamId) { props.history.push('/') } else { this.props.updateUserState(user) this.props.getUser(user.user.steamId) } } //render

I have written a Higher Order Component: import React from 'react'; const NewHOC = (PassedComponent) => { return class extends React.Component { render(){ return ( <div> <PassedComponent {...this.props}/> </div> ) } } } export default NewHOC; I am using the above in my App.js: import React from 'react'; import Movie from './movie/Movie'; import MyHOC from './hoc/MyHOC'; import NewHOC from './hoc/NewHOC'; export default class App extends React.Component { render() { return ( <div> Hello From React!! <NewHOC> <Movie name="Blade Runner"></Movie> </NewHOC> </div> ); } } But, the warning I am