Importing New React Component Compiles But Does Not Render

0
votes

So I've been having problems with this code that i am working on

Dependencies: React, Redux, Eslinter, PropTypes, BreadCrumb

There's a view page that imports various components from other files

The Existing Structure Goes:

import Component from './Component.js';

...

let var = '';

...

if (this.state.value !=== null) {
  var = <Component/>
}

...

render() {
  return(
    <div>
        SomeContent
        {var}
   </ div>
  )
}

When i try to import my created PureComponent the code Compiles.

Component Dependencies: { Button, Modal }React-Bootstrap, React, PropTypes

However the page does not render, and i cant figure out the reason why it would not render when it is introduced in the same manner as the existing structure Above

Update: I have tried making a bare minimum component returning just a simple Div & got the same result

RESOLVED:
There was a depreciated reference in my component to Modal from 'react-bootstrap' which still contained the node_module reference title but not the corresponding JS file which they have since moved to 'react-modal'

2
javascriptreactjsreact-reduxeslintreact-bootstrap
Does "the page does not render" mean nothing at all appears, or just not your component? - Alexander van Oostenrijk
The entire page stops rendering - Bfraz
That would be indicative of an error. Check your browser's developer console to see if an error appears. - Alexander van Oostenrijk
var is a reserved word. You shouldn't use it as a variable name let var = '';. This might be part of your issue - Brian Thompson
var is Purely for Demonstration purposes the actual reference is let var = ' ' - Bfraz

2 Answers

1
votes
import Component from './Component.js';

let entity = '';


if (this.state.value !== null) {
    entity = <Component />
}


render() {
    return (
        <div>
            SomeContent
        {entity}
        </ div>
    )
}

Firstly, You can not use var keyword for naming a variable and also, please check your condition fulfillment.

1
votes

When dealing with state and conditional rendering, you should put conditions within the render method (or in a class field):

Working example:

Edit Conditional Rendering

import React from "react";
import OtherComponent from "../OtherComponent";

class Example extends React.Component {
  constructor() {
    super();

    this.state = {
      value: ""
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <div>
        SomeContent
        {this.state.value && <OtherComponent />}
        <br />
        <input
          value={this.state.value}
          placeholder="Type something..."
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

export default Example;