Conditional Rendering in ReactJS

Question

I have a situation where I want to render a different header depending on the value of a variable in a Redux State.

This is my MyClass.js

class MyClass extends React.Component {
    constructor(props) {
        this.state = {
            headerState: "home"
        };
        this.GetHeader = this.GetHeader.bind(this);
    }

    GetHeader() {
        const headerType = this.renderHeader;
        if (headerType == "a") {
            return (Some html code);
        } [...] {
            return (Some html code);
        } else {
            return (Some html code);
        }
    }

    render() { <
        GetHeader / > // This is line 79
    }

    function mapStateToProps(state, ownProps) {
        return {
            renderHeader: state.renderHeader
        };
    }
}

export default withRouter(connect(mapStateToProps)(MyClass));

This is my reducer:

export default function renderHeaderReducer(state = [], action) {
    switch(action.type) {
        case 'RENDER_HEADER':
            return [...state, Object.assign({}, action.headerType)];
        default:
            return state;
    }
}

When I tried running the code, on the browser it says:

Uncaught ReferenceError: GetHeader is not defined at Header.render (Header.js:79).

I followed this doc(first example)

Not sure what I am doing wrong or what concepts I must have misunderstood in terms of binding methods to this context. Cheers.

Estus Flask · Accepted Answer · 2018-10-31 09:15:49Z

2

There's no GetHeader variable, it's this.GetHeader method. There are no reasons to use GetHeader as React element, it's a method that doesn't need its own props. It doesn't need to be bound to this when called as a method.

There's no this.renderHeader because renderHeader is a prop.

It likely should be:

  state = {
    headerState: "home"
  }

  GetHeader() {
    const headerType = this.props.renderHeader;
    if (headerType == "a") {
       return (Some html code);
    } [...] {
      return (Some html code);
    } else {
      return (Some html code);
    }
 }

 render() {
   return <>
     {this.GetHeader()}
     ...
   </>;
 }

If render isn't too big or GetHeader isn't reused, there may be no need to extract its contents from render.

edited Oct 31, 2018 at 9:15

answered Oct 31, 2018 at 8:45

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AKJ Over a year ago

I get another error that says: Cannot read property 'props' of undefined. This is pointing to the this.props.renderHeader.

Estus Flask Over a year ago

There shouldn't be such error if you use GetHeader as described in the answer, not as <GetHeader>.

AKJ Over a year ago

Could you explain to me why it matters if i did {this.GetHeader()} versus <this.GetHeader() />? I am relatively new at this

Estus Flask Over a year ago

<this.GetHeader() /> is a mistake because it expects that this.GetHeader() returns React component (a class or a function). <this.GetHeader/> provides unneeded overhead because it wraps GetHeader function with React.createElement. you can't benefit from that in this case. {this.GetHeader()} inserts the layout that is returned from GetHeader into render layout.

Meir · Accepted Answer · 2018-10-31 08:44:06Z

0

Because it isn't. You should add a variable in the render:

render() {
  const GetHeader = this.GetHeader;
  return <GetHeader />;
}

You code had 2 issues: 1. The GetHeader wasn't accessible locally. 2. You didn't use return statement

answered Oct 31, 2018 at 8:44

Meir

14.4k4 gold badges44 silver badges49 bronze badges

Comments

somsgod · Accepted Answer · 2018-10-31 08:45:12Z

0

Because you are missing function in front of GetHeader() {

function GetHeader(){}

For more reference check : https://reactjs.org/docs/conditional-rendering.html

answered Oct 31, 2018 at 8:45

somsgod

3572 silver badges11 bronze badges

Collectives™ on Stack Overflow

Conditional Rendering in ReactJS

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related