How to ssr conditional component in nextJS?

Question

I have been working with nextjs, react, and redux but I get stuck.

I want to ssr my conditional component. My code has 3 content component which will render if user clicks the link in the Navbar component based on the condition above. That code works exactly like I want, but when I view the source code in Chrome, none of the <Content /> components get rendered. Here is my code:

import React, { Component } from 'react';
import dynamic from 'next/dynamic';
import NProgress from 'nprogress';
import { connect } from 'react-redux';
import Router from 'next/router';
import {
  actionFinansial,
  actionKarierSukses,
  actionGayaHidup
} from '/actions/navbar/navbar';
import SearchBar from '/components/Navbar/SearchBar';

import Nav from '/components/Navbar/Nav';

const Content = dynamic(import('/components/Navbar/Content'));

Router.onRouteChangeStart = url => {
  console.log(`Loading: ${url}`);
  NProgress.start();
};
Router.onRouteChangeComplete = () => NProgress.done();
Router.onRouteChangeError = () => NProgress.done();

class Navbar extends Component {
  state = {
    isClick: false,
    active: ''
  };

  componentDidMount() {
    document.addEventListener('click', this.handleClickOutside);
  }

  componentWillUnmount() {
    document.addEventListener('click', this.handleClickOutside);
  }

  handleClickOutside = e => {
    if (this.nav && !this.nav.contains(e.target)) {
      this.resetNavbar();
    }
  };

  resetNavbar = () => {
    this.setState({
      isClick: false,
      active: ''
    });
  };

  handleClick = (e, data) => {
    e.preventDefault();
    const cond = data === e.target.className || data === e.target.id;

    if (cond) {
      this.setState({
        isClick: true,
        active: data
      });
    }
    if (data === this.state.active) {
      this.setState({
        isClick: false,
        active: ''
      });
    }
  };

  handleContent = id => {
    if (this.state.active === 'Gaya Hidup') {
      this.props.fetchGayaHidup(id);
    } else if (this.state.active === 'Finansial') {
      this.props.fetchFinansial(id);
    } else {
      this.props.fetchKarierSukses(id);
    }
  };

  renderArrow = (type, data) => {
    return <span id={type} className={data} onClick={this.handleClick} />;
  };

  render() {
    const karierSukses = {
      16: 'Karier',
      15: 'Sukses',
      10: 'Edukasi'
    };

    const gayahidup = {
      16: 'Hiburan',
      17: 'Jalan-Jalan',
      18: 'Tekno',
      19: 'Hobi',
      8: 'Hubungan',
      9: 'Pernikahan',
      14: 'Keluarga',
      12: 'Kesehatan',
      15: 'Rumah',
      11: 'Otomotif'
    };

    const finansial = { 16: 'Bisnis', 11: 'Keuangan', 12: 'Investasi' };

    const {
      imgBig,
      contentFinansial,
      contentKarierSukses,
      contentGayaHidup
    } = this.props;
    const { active, isClick } = this.state;

    return (
      <section className="navbar" ref={node => (this.nav = node)}>
        {/* Category Nav */}
        <Nav
          resetNavbar={this.resetNavbar}
          active={active}
          handleClick={this.handleClick}
          arrow={this.renderArrow}
        />

        {/* Category Content */}
        {this.state.active === 'Gaya Hidup' ? (
          <Content
            imgBig={imgBig}
            categoriesIds={gayahidup}
            handleContent={this.handleContent}
            active="8"
            activeName="Hubungan"
            content={contentGayaHidup}
          />
        ) : (
          ''
        )}
        {this.state.active === 'Finansial' ? (
          <Content
            imgBig={imgBig}
            icClick={isClick}
            categoriesIds={finansial}
            handleContent={this.handleContent}
            active="11"
            activeName="Keuangan"
            content={contentFinansial}
          />
        ) : (
          ''
        )}

        {this.state.active === 'Karier & Sukses' ? (
          <Content
            imgBig={imgBig}
            icClick={isClick}
            categoriesIds={karierSukses}
            handleContent={this.handleContent}
            active="10"
            activeName="Edukasi"
            content={contentKarierSukses}
          />
        ) : (
          ''
        )}

        {this.state.active === 'search-bar' ? <SearchBar /> : ''}

        <div className="navbar__search-icon">{/* <img src="" alt="" /> */}</div>
      </section>
    );
  }
}

function mapStateToProps(state) {
  return {
    contentFinansial: state.navbar.category.finansial,
    contentKarierSukses: state.navbar.category.karierSukses,
    contentGayaHidup: state.navbar.category.gayaHidup
  };
}

export default connect(mapStateToProps, {
  fetchGayaHidup: actionGayaHidup,
  fetchFinansial: actionFinansial,
  fetchKarierSukses: actionKarierSukses
})(Navbar);

Get any solution for this?

Nisarg Thakkar
– Nisarg Thakkar

2018-09-10 07:14:29 +00:00
Commented Sep 10, 2018 at 7:14 — Nisarg Thakkar
– Nisarg Thakkar, Commented Sep 10, 2018 at 7:14

aquiseb · Accepted Answer · 2018-03-18 11:13:11Z

Apparently contentGayaHidup (for instance), is passed as props, after you click the navbar, am I correct? There a quite a few things happening outside this code...

Could you try one of the following to see if that's the problem? If it is indeed the problem (the contentXXXXXX props updating but not passed to the render), you may have to find another way to pass them down; through the state (may be quite extensive though), through redux maybe...

Hati2 teman

1- Pass the props to the state

constructor(props){
  super(props);
  this.state={contentGayaHidup: this.props.contentGayaHidup}
}
// some more code
render() {
  return(
    {this.state.active === 'Gaya Hidup' ? (
          <Content
            imgBig={imgBig}
            categoriesIds={gayahidup}
            handleContent={this.handleContent}
            active="8"
            activeName="Hubungan"
            content={this.state.contentGayaHidup}
          />
        ) : (
          ''
        )}
  )
}

2- Use componentdidUpdate

componentDidUpdate(prevProps, prevState) {
        const {contentGayaHidup} = this.props;
        if(contentGayaHidup !== prevProps.contentGayaHidup){
            this.setState({contentGayaHidup: this.props.contentGayaHidup})
        }

    }

// some more code
render() {
  return(
    {this.state.active === 'Gaya Hidup' ? (
          <Content
            imgBig={imgBig}
            categoriesIds={gayahidup}
            handleContent={this.handleContent}
            active="8"
            activeName="Hubungan"
            content={this.state.contentGayaHidup}
          />
        ) : (
          ''
        )}
  )
}

Collectives™ on Stack Overflow

How to ssr conditional component in nextJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related