CODEWITHSUNDEEP
reactjshigher-order-components
Andreas_Lng
Andreas_Lng

Reputation: 1199

Pass dynamic value to higher order component

In my code I have to use the same lines of code at different places. So i thought that's the right time to put this code into a kind of base class. I've read about Higher-Order Components which seems to be the way to go and following some examples i ended up with the following code, which is not working. I've tried something around but was not able to get it work.

My HOC: 

export interface HocProps {
    DynamicId: string
}

const withDiv = (hocProps) => (BaseComponent) => {
    return class extend React.Component {
        render() {
            return (
                <div id={ hocProps.DynamicId }>
                    <BaseComponent />
                </div>
            );
        }
    }
}

export default withDiv;

A component to be wrapped by the div:

import withDiv from './MyHoc';

class MyComponent extends React.Component {
    render() {
        return (
            <h3>Some content here</h3>
        );
    }
}

export default withDiv({ DynamicId: <dynamic value> })(MyComponent);

Another component, that uses MyComponent:

import MyComponent from './MyComponent';

export class OtherComponent extends React.Component {
    render() {
        return (
            <div>
                ... Some content here ...
                <MyComponent DynamicId={ 'id123' } />
            </div>
        );
    }
}

I'd like to pass an id to in OtherComponent. Then in MyComponent this id has to be passed to the HOC as , which is not working. I only can pass static values to the HOC.

I'm new to react and I think i've made same mistake(s).

So my question is: What am i doing wrong and how is it done right? Maybe there is another/better way for this?

Thanks in advance.

Edit: I would expect this result:

<div>
    ... Some content here ...
    <div id='id123'>
        <h3>Some content here</h3>
    </div>
</div>

Upvotes: 0

Views: 2170

Answers (3)

humanbean
humanbean

Reputation: 562

There are two ways you can use HOCs according to your implementation. I have created a sandbox, which will help you understand how to use HOCs.

One way is to extract your props out const hocWrapper = Component => props => { // return NewComponent and call it too }. Here you have to call your component while returning.

Other way is to destructure or use the props inside hocWrappers. const hocWrapper = Component => { // return NewComponent, you will receive props inside the newComponent and do what you wish}

Upvotes: 3

Ska
Ska

Reputation: 6888

Try this

const withDiv = (BaseComponent) => {
    class CompWithDiv extends React.Component {
        render() {
            return (
                <div id={this.props.DynamicId}>
                    <BaseComponent />
                </div>
            );
        }
    }
    return CompWithDiv ;
}

export default withDiv;

Upvotes: 1

acbay
acbay

Reputation: 892

Im not sure how you pass the dynamic values and whats wrong with it. but, you can just create your component like 

export interface MyCustomProps {
    customProp: string;
}

export interface MyCustomState {
    something: string;
}

class MyComponent extends React.Component<MyCustomProps, MyCustomState>{
  render(){<div>
    ... Some content here ...
    <div>{this.props.customProp}</div>
  </div>}
}
export default MyComponent

and use it in another component like

import MyComponent from './MyComponent';

export class OtherComponent extends React.Component {
  render() {
    return (
        <div>
            ... Some content here ...
            <MyComponent customProp={someDynamicStringValues}/>
        </div>
    );
  }
}

and you can do it recursively

Upvotes: 0

Related Questions