react higher order components

// This function takes a component... function withSubscription(WrappedComponent, selectData) { // ...and returns another component... return class extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { data: selectData(DataSource, props) }; } componentDidMount() { // ... that takes care of the subscription... DataSource.addChangeListener(this.handleChange); } componentWillUnmount() { DataSource.removeChangeListener(this.handleChange); } handleChange() { this.setState({ data: selectData(DataSource, this.props) }); } render() { // ... and renders the wrapped component with the fresh data! // Notice that we pass through any additional props return <WrappedComponent data={this.state.data} {...this.props} />; } }; }

import React, { useState } from 'react'; class WelcomeName extends React.Component { render() { return <h1>Hello, {this.props.name}</h1> } } function HighHookWelcome() { const [name ,setName] = useState("Default Name Here"); return( <WelcomeName name={name} /> ); } // Note: Didn't need to use state for a static value. // Minimal example, just to illustrate passing state/props. // setName is a function to change the name value.

how to pass props to higher order component

just pass your props as normal to the WrappedComponent

//App Component / root component
import React from 'react';
import WrappedComponent from "./WrappedComponent";

export default function App() {
    return (
        <div>
            <WrappedComponent name="CreatorOfCode" />
        </div>
    )
}
//******************************************************************************
// WrappedComponent
import React from 'react';
function WrappedComponent({}) {
    return (
        <div>
            <h1>Hello World</h1>
        </div>
    )
}

export default ComponentEnhancer(WrappedComponent)
//*****************************************************************************
// higher order component called ComponentEnhancer
import React from 'react';
import PropTypes from 'prop-types';
export default (WrappedComponent) => {
    const hocComponent = ({ ...props }) => {
    		console.log(props.name)//CreatorOfCode
            return <WrappedComponent {...props} 
    	}/>

    hocComponent.propTypes = {};
    return hocComponent;
}

Posted by: Guest on December-19-2020

Code answers related to "react higher order components"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Answers for "react higher order components"

Code answers related to "react higher order components"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us