CODEWITHSUNDEEP
javascriptreactjsimport
Inderjeet Singh
Inderjeet Singh

Reputation: 566

Importing components on conditional bases in Reactjs (Conditional based import)

I am really new to react, right now stuck on how to import components based on condition which will come basically through props. Have a look on my following render code in my class

render() {

if (this.props.social == 1) {
  const FacebookLogin = require('react-facebook-login-component').FacebookLogin;
  const GoogleLogin = require('react-google-login')
}
return (<div>
  {
    (this.props.social == 1)?
      <div className="row social">
        <div className="col">
          <FacebookLogin  />
        </div>
        <div className="col">
          <GoogleLogin />
        </div>
      </div>
    :""
  }</div>
)
}

The above code when renders throws an error

GoogleLogin not defined / FacebookLogin not defined

Please note that I don't want to use import in the code. Please give your suggestions/answer/feedback on how to fix this.

Thanks!

Upvotes: 0

Views: 2671

Answers (4)

Macilias
Macilias

Reputation: 3533

I helped my self in this situation with a similar approach which was suggested by Ayinla but by using separate functions on conditional base:

class X extends Component {
    renderGoogleLogin() {
        return(
            <div className="col">
                <GoogleLogin />
            </div>
        );
    }
    renderFacebookLogin() {
        return(
            <div className="col">
                <FacebookLogin />
            </div>
        );
    }

    render() {
        const gl  = this.props.social == 1 ? this.renderGoogleLogin() : '';
        const fbl = this.props.social == 1 ? this.renderFacebookLogin() : '';

        return (
            <div className="row social">
                {gl}
                {fbl}
            </div>
        );
    }
}

Upvotes: 0

Ben Lorantfy
Ben Lorantfy

Reputation: 963

The error you're getting is because const is block scoped. This means variables declared using const are only in scope within the curly brackets you define them in. For your case, FacebookLogin and GoogleLogin are only defined within the if statement. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

I would just import or require the components outside of my render. For that case they'd be in module level scope. Is there a reason you need to conditionally require? If you're concerned about your bundle size, you could look into code splitting (assuming you're using webpack): https://webpack.js.org/guides/code-splitting/ . However, I wouldn't worry about this until you discover it's an actual issue. Otherwise this is a form of premature optimization.

Upvotes: 0

Abdulsalam Ayinla
Abdulsalam Ayinla

Reputation: 51

It looks to me like when you try to render the component and the props.social value is not 1, The components would be undefined as there would be no where to find them. They only get created when the condition passes.

Better still move this into another method inside the class e.g

`

class X extends Component {
  renderLogin() {
    const FacebookLogin = require("react-facebook-login-component")
      .FacebookLogin;
    const GoogleLogin = require("react-google-login");

    return (
      <div className="row social">
        <div className="col">
          <FacebookLogin />
        </div>
        <div className="col">
          <GoogleLogin />
        </div>
      </div>
    );
  }

  render() {
    return <div>{this.props.social == 1 ? this.renderLogin() : ""}</div>;
  }
}

`

Upvotes: 1

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22885

It is because build tools need to know which code/component so add in your build code. In this case, build tools can't get to know that you are importing some other component but when your code executes, it gives error because that component was not imported. So import components unconditionally and use it conditionally

Upvotes: 0

Related Questions