React component not showing up

I am working on incorporating a react front end with my flask website and am having trouble getting the react component to show up. I am able to use webpack to build and load in my modules without issue, but perhaps don't fully understand how to get the react side running.

Here is the html that holds the div (note, I use flask to simply extend my layout html):

{% extends 'layout.html' %}

{% block content %}



<body id = "aboutPage" data-spy="scroll" data-target = ".navbar" data-offset="60">

  <div id = "date-root"> </div>



</body>

{% endblock content %}

The layout html:

<!DOCTYPE html>

<html style="padding:0px;" >

<head >

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">

    <meta name="robots" content="noindex,follow" />

    <!-- React required tags, change to production later -->

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>



    <!-- Lodash for webpack -->

    <script src="https://unpkg.com/lodash@4.16.6"></script>



    <!-- Bootstrap CSS and JQuery -->



    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-2.2.4.js" charset="utf-8"></script>

    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">

    {% if title %}

        <title>{{ title }}</title>

    {% else %}

        <title>Sneak Em</title>

    {% endif %}

</head>

<body background = "{{ url_for('static', filename = 'shoes-dark-green.jpg') }}">

    <header class="site-header">

      <nav class="navbar navbar-expand-md navbar-dark bg-steel navbar-fixed-top" style="background-color: #000000; border-radius:0; margin-bottom:0; border:0; position:fixed; top: 0; width: 100%; z-index:999;">

        <div class="container">

          <a class="navbar-brand mr-4" href="{{ url_for('shop') }}">Sneak Em</a>

          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

          </button>

          <div class="collapse navbar-collapse" id="navbarToggle">

            <div class="navbar-nav mr-auto">

              <a class="nav-item nav-link" href="{{ url_for('home') }}">Home</a>

              <a class="nav-item nav-link" href="{{ url_for('calendar') }}">Schedule</a>

            </div>

            <!-- Navbar Right Side -->

            <div class="navbar-nav right" style = "text-align: center;">

              {% if not current_user.is_authenticated %}

                <a class="nav-item nav-link" href="{{ url_for('login') }}">Login</a>

                <a class="nav-item nav-link" href="{{ url_for('register') }}">Register</a>

              {% else %}

                <a class="nav-item nav-link" href="{{ url_for('profile') }}">

                {% if current_user.first_name is not none %}

                  {{current_user.first_name}}

                {% else %}

                  Profile

                {% endif %}

                </a>

                <a class="nav-item nav-link" href="{{ url_for('logout') }}">Logout</a>

              {% endif %}

            </div>

          </div>

        </div>

      </nav>

    </header>

    {% with messages = get_flashed_messages(with_categories=true) %}

    {% if messages %}

    <main role="main" class="container" style = "width: 100%; height:auto; z-index:-999; margin-top:0px;">

      <div class="row" style = "width: 100%;">

        <div class="col-md-8" style = "width: 100%; flex: none; max-width: none;">

              {% for category, message in messages %}

                <div class="alert alert-{{ category }}">

                  {{ message }}

                </div>

              {% endfor %}

        </div>

      </div>

    </main>

    {% endif %}

    {% endwith %}

    {% block content %}{% endblock %}

    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

</html>

Here is my entry point js file, index.js:

import React from 'react';

import ReactDOM from 'react-dom';

import MyDayPicker from './daypicker';



ReactDOM.render(

  <MyDayPicker />,

  document.getElementById("date-root")

);



const element = <h1>Schedule</h1>;

console.log(element);

Lastly, here is the daypicker.js file which holds the react component and its code:

import React from 'react';

import DayPicker from 'react-day-picker';

import 'react-day-picker/lib/style.css';



export default class MyDayPicker extends React.Component {

  constructor(props) {

    super(props);

    this.handleDayClick = this.handleDayClick.bind(this);

    this.state = {

      selectedDay: null,

    };

  }

  handleDayClick(day, { selected }) {

    this.setState({

      selectedDay: selected ? undefined : day,

    });

  }

  render() {

    return (

      <div>

        <DayPicker

          selectedDays={this.state.selectedDay}

          onDayClick={this.handleDayClick}

        />

        <p>

          {this.state.selectedDay

            ? this.state.selectedDay.toLocaleDateString()

            : 'Please select a day'}

        </p>

      </div>

    );

  }

}

Please help me figure out what I am missing! Thanks guys.

asked Dec 31 '18 at 12:33

Pambalos

add a comment |

Here is the html that holds the div (note, I use flask to simply extend my layout html):

{% extends 'layout.html' %}

{% block content %}



<body id = "aboutPage" data-spy="scroll" data-target = ".navbar" data-offset="60">

  <div id = "date-root"> </div>



</body>

{% endblock content %}

The layout html:

<!DOCTYPE html>

<html style="padding:0px;" >

<head >

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">

    <meta name="robots" content="noindex,follow" />

    <!-- React required tags, change to production later -->

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>



    <!-- Lodash for webpack -->

    <script src="https://unpkg.com/lodash@4.16.6"></script>



    <!-- Bootstrap CSS and JQuery -->



    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-2.2.4.js" charset="utf-8"></script>

    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">

    {% if title %}

        <title>{{ title }}</title>

    {% else %}

        <title>Sneak Em</title>

    {% endif %}

</head>

<body background = "{{ url_for('static', filename = 'shoes-dark-green.jpg') }}">

    <header class="site-header">

      <nav class="navbar navbar-expand-md navbar-dark bg-steel navbar-fixed-top" style="background-color: #000000; border-radius:0; margin-bottom:0; border:0; position:fixed; top: 0; width: 100%; z-index:999;">

        <div class="container">

          <a class="navbar-brand mr-4" href="{{ url_for('shop') }}">Sneak Em</a>

          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

          </button>

          <div class="collapse navbar-collapse" id="navbarToggle">

            <div class="navbar-nav mr-auto">

              <a class="nav-item nav-link" href="{{ url_for('home') }}">Home</a>

              <a class="nav-item nav-link" href="{{ url_for('calendar') }}">Schedule</a>

            </div>

            <!-- Navbar Right Side -->

            <div class="navbar-nav right" style = "text-align: center;">

              {% if not current_user.is_authenticated %}

                <a class="nav-item nav-link" href="{{ url_for('login') }}">Login</a>

                <a class="nav-item nav-link" href="{{ url_for('register') }}">Register</a>

              {% else %}

                <a class="nav-item nav-link" href="{{ url_for('profile') }}">

                {% if current_user.first_name is not none %}

                  {{current_user.first_name}}

                {% else %}

                  Profile

                {% endif %}

                </a>

                <a class="nav-item nav-link" href="{{ url_for('logout') }}">Logout</a>

              {% endif %}

            </div>

          </div>

        </div>

      </nav>

    </header>

    {% with messages = get_flashed_messages(with_categories=true) %}

    {% if messages %}

    <main role="main" class="container" style = "width: 100%; height:auto; z-index:-999; margin-top:0px;">

      <div class="row" style = "width: 100%;">

        <div class="col-md-8" style = "width: 100%; flex: none; max-width: none;">

              {% for category, message in messages %}

                <div class="alert alert-{{ category }}">

                  {{ message }}

                </div>

              {% endfor %}

        </div>

      </div>

    </main>

    {% endif %}

    {% endwith %}

    {% block content %}{% endblock %}

    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

</html>

Here is my entry point js file, index.js:

import React from 'react';

import ReactDOM from 'react-dom';

import MyDayPicker from './daypicker';



ReactDOM.render(

  <MyDayPicker />,

  document.getElementById("date-root")

);



const element = <h1>Schedule</h1>;

console.log(element);

Lastly, here is the daypicker.js file which holds the react component and its code:

import React from 'react';

import DayPicker from 'react-day-picker';

import 'react-day-picker/lib/style.css';



export default class MyDayPicker extends React.Component {

  constructor(props) {

    super(props);

    this.handleDayClick = this.handleDayClick.bind(this);

    this.state = {

      selectedDay: null,

    };

  }

  handleDayClick(day, { selected }) {

    this.setState({

      selectedDay: selected ? undefined : day,

    });

  }

  render() {

    return (

      <div>

        <DayPicker

          selectedDays={this.state.selectedDay}

          onDayClick={this.handleDayClick}

        />

        <p>

          {this.state.selectedDay

            ? this.state.selectedDay.toLocaleDateString()

            : 'Please select a day'}

        </p>

      </div>

    );

  }

}

Please help me figure out what I am missing! Thanks guys.

asked Dec 31 '18 at 12:33

Pambalos

add a comment |

Here is the html that holds the div (note, I use flask to simply extend my layout html):

{% extends 'layout.html' %}

{% block content %}



<body id = "aboutPage" data-spy="scroll" data-target = ".navbar" data-offset="60">

  <div id = "date-root"> </div>



</body>

{% endblock content %}

The layout html:

<!DOCTYPE html>

<html style="padding:0px;" >

<head >

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">

    <meta name="robots" content="noindex,follow" />

    <!-- React required tags, change to production later -->

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>



    <!-- Lodash for webpack -->

    <script src="https://unpkg.com/lodash@4.16.6"></script>



    <!-- Bootstrap CSS and JQuery -->



    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-2.2.4.js" charset="utf-8"></script>

    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">

    {% if title %}

        <title>{{ title }}</title>

    {% else %}

        <title>Sneak Em</title>

    {% endif %}

</head>

<body background = "{{ url_for('static', filename = 'shoes-dark-green.jpg') }}">

    <header class="site-header">

      <nav class="navbar navbar-expand-md navbar-dark bg-steel navbar-fixed-top" style="background-color: #000000; border-radius:0; margin-bottom:0; border:0; position:fixed; top: 0; width: 100%; z-index:999;">

        <div class="container">

          <a class="navbar-brand mr-4" href="{{ url_for('shop') }}">Sneak Em</a>

          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

          </button>

          <div class="collapse navbar-collapse" id="navbarToggle">

            <div class="navbar-nav mr-auto">

              <a class="nav-item nav-link" href="{{ url_for('home') }}">Home</a>

              <a class="nav-item nav-link" href="{{ url_for('calendar') }}">Schedule</a>

            </div>

            <!-- Navbar Right Side -->

            <div class="navbar-nav right" style = "text-align: center;">

              {% if not current_user.is_authenticated %}

                <a class="nav-item nav-link" href="{{ url_for('login') }}">Login</a>

                <a class="nav-item nav-link" href="{{ url_for('register') }}">Register</a>

              {% else %}

                <a class="nav-item nav-link" href="{{ url_for('profile') }}">

                {% if current_user.first_name is not none %}

                  {{current_user.first_name}}

                {% else %}

                  Profile

                {% endif %}

                </a>

                <a class="nav-item nav-link" href="{{ url_for('logout') }}">Logout</a>

              {% endif %}

            </div>

          </div>

        </div>

      </nav>

    </header>

    {% with messages = get_flashed_messages(with_categories=true) %}

    {% if messages %}

    <main role="main" class="container" style = "width: 100%; height:auto; z-index:-999; margin-top:0px;">

      <div class="row" style = "width: 100%;">

        <div class="col-md-8" style = "width: 100%; flex: none; max-width: none;">

              {% for category, message in messages %}

                <div class="alert alert-{{ category }}">

                  {{ message }}

                </div>

              {% endfor %}

        </div>

      </div>

    </main>

    {% endif %}

    {% endwith %}

    {% block content %}{% endblock %}

    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

</html>

Here is my entry point js file, index.js:

import React from 'react';

import ReactDOM from 'react-dom';

import MyDayPicker from './daypicker';



ReactDOM.render(

  <MyDayPicker />,

  document.getElementById("date-root")

);



const element = <h1>Schedule</h1>;

console.log(element);

Lastly, here is the daypicker.js file which holds the react component and its code:

import React from 'react';

import DayPicker from 'react-day-picker';

import 'react-day-picker/lib/style.css';



export default class MyDayPicker extends React.Component {

  constructor(props) {

    super(props);

    this.handleDayClick = this.handleDayClick.bind(this);

    this.state = {

      selectedDay: null,

    };

  }

  handleDayClick(day, { selected }) {

    this.setState({

      selectedDay: selected ? undefined : day,

    });

  }

  render() {

    return (

      <div>

        <DayPicker

          selectedDays={this.state.selectedDay}

          onDayClick={this.handleDayClick}

        />

        <p>

          {this.state.selectedDay

            ? this.state.selectedDay.toLocaleDateString()

            : 'Please select a day'}

        </p>

      </div>

    );

  }

}

Please help me figure out what I am missing! Thanks guys.

asked Dec 31 '18 at 12:33

Pambalos

Here is the html that holds the div (note, I use flask to simply extend my layout html):

{% extends 'layout.html' %}

{% block content %}



<body id = "aboutPage" data-spy="scroll" data-target = ".navbar" data-offset="60">

  <div id = "date-root"> </div>



</body>

{% endblock content %}

The layout html:

<!DOCTYPE html>

<html style="padding:0px;" >

<head >

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">

    <meta name="robots" content="noindex,follow" />

    <!-- React required tags, change to production later -->

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>



    <!-- Lodash for webpack -->

    <script src="https://unpkg.com/lodash@4.16.6"></script>



    <!-- Bootstrap CSS and JQuery -->



    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-2.2.4.js" charset="utf-8"></script>

    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">

    {% if title %}

        <title>{{ title }}</title>

    {% else %}

        <title>Sneak Em</title>

    {% endif %}

</head>

<body background = "{{ url_for('static', filename = 'shoes-dark-green.jpg') }}">

    <header class="site-header">

      <nav class="navbar navbar-expand-md navbar-dark bg-steel navbar-fixed-top" style="background-color: #000000; border-radius:0; margin-bottom:0; border:0; position:fixed; top: 0; width: 100%; z-index:999;">

        <div class="container">

          <a class="navbar-brand mr-4" href="{{ url_for('shop') }}">Sneak Em</a>

          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

          </button>

          <div class="collapse navbar-collapse" id="navbarToggle">

            <div class="navbar-nav mr-auto">

              <a class="nav-item nav-link" href="{{ url_for('home') }}">Home</a>

              <a class="nav-item nav-link" href="{{ url_for('calendar') }}">Schedule</a>

            </div>

            <!-- Navbar Right Side -->

            <div class="navbar-nav right" style = "text-align: center;">

              {% if not current_user.is_authenticated %}

                <a class="nav-item nav-link" href="{{ url_for('login') }}">Login</a>

                <a class="nav-item nav-link" href="{{ url_for('register') }}">Register</a>

              {% else %}

                <a class="nav-item nav-link" href="{{ url_for('profile') }}">

                {% if current_user.first_name is not none %}

                  {{current_user.first_name}}

                {% else %}

                  Profile

                {% endif %}

                </a>

                <a class="nav-item nav-link" href="{{ url_for('logout') }}">Logout</a>

              {% endif %}

            </div>

          </div>

        </div>

      </nav>

    </header>

    {% with messages = get_flashed_messages(with_categories=true) %}

    {% if messages %}

    <main role="main" class="container" style = "width: 100%; height:auto; z-index:-999; margin-top:0px;">

      <div class="row" style = "width: 100%;">

        <div class="col-md-8" style = "width: 100%; flex: none; max-width: none;">

              {% for category, message in messages %}

                <div class="alert alert-{{ category }}">

                  {{ message }}

                </div>

              {% endfor %}

        </div>

      </div>

    </main>

    {% endif %}

    {% endwith %}

    {% block content %}{% endblock %}

    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

</html>

Here is my entry point js file, index.js:

import React from 'react';

import ReactDOM from 'react-dom';

import MyDayPicker from './daypicker';



ReactDOM.render(

  <MyDayPicker />,

  document.getElementById("date-root")

);



const element = <h1>Schedule</h1>;

console.log(element);

Lastly, here is the daypicker.js file which holds the react component and its code:

import React from 'react';

import DayPicker from 'react-day-picker';

import 'react-day-picker/lib/style.css';



export default class MyDayPicker extends React.Component {

  constructor(props) {

    super(props);

    this.handleDayClick = this.handleDayClick.bind(this);

    this.state = {

      selectedDay: null,

    };

  }

  handleDayClick(day, { selected }) {

    this.setState({

      selectedDay: selected ? undefined : day,

    });

  }

  render() {

    return (

      <div>

        <DayPicker

          selectedDays={this.state.selectedDay}

          onDayClick={this.handleDayClick}

        />

        <p>

          {this.state.selectedDay

            ? this.state.selectedDay.toLocaleDateString()

            : 'Please select a day'}

        </p>

      </div>

    );

  }

}

Please help me figure out what I am missing! Thanks guys.

javascript html reactjs webpack node-modules

asked Dec 31 '18 at 12:33

Pambalos

asked Dec 31 '18 at 12:33

Pambalos

asked Dec 31 '18 at 12:33

Pambalos

asked Dec 31 '18 at 12:33

Pambalos

asked Dec 31 '18 at 12:33

Pambalos

add a comment |

2 Answers
2

active

oldest

votes

I'm not using flask so maybe I'm wrong... but it seems to me that you missed react script in *.html file. Please add:

<script src="<path to your react script - index.js" ></script>

answered Dec 31 '18 at 12:48

miuosh

12312

My html file is located in a folder with a different parent than the js file, how do I format this call? I know that I can access parent with '../', but to access the parent's parent, can i just do '../../'? @miuosh

– Pambalos
Dec 31 '18 at 17:57

Your should format path to point to root folder (public) which is determined by web server like IIS or Express.

– miuosh
Jan 6 at 16:05

add a comment |

You can check diagnose the problem by starting to see whether a native react component is loaded or not, like Router, if the problem didn't went away, if not, check the inspection console to see the error.

answered Dec 31 '18 at 14:21

Masoud Tahmasebi

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53987585%2freact-component-not-showing-up%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

I'm not using flask so maybe I'm wrong... but it seems to me that you missed react script in *.html file. Please add:

<script src="<path to your react script - index.js" ></script>

answered Dec 31 '18 at 12:48

miuosh

12312

My html file is located in a folder with a different parent than the js file, how do I format this call? I know that I can access parent with '../', but to access the parent's parent, can i just do '../../'? @miuosh

– Pambalos
Dec 31 '18 at 17:57

Your should format path to point to root folder (public) which is determined by web server like IIS or Express.

– miuosh
Jan 6 at 16:05

add a comment |

I'm not using flask so maybe I'm wrong... but it seems to me that you missed react script in *.html file. Please add:

<script src="<path to your react script - index.js" ></script>

answered Dec 31 '18 at 12:48

miuosh

12312

My html file is located in a folder with a different parent than the js file, how do I format this call? I know that I can access parent with '../', but to access the parent's parent, can i just do '../../'? @miuosh

– Pambalos
Dec 31 '18 at 17:57

Your should format path to point to root folder (public) which is determined by web server like IIS or Express.

– miuosh
Jan 6 at 16:05

add a comment |

I'm not using flask so maybe I'm wrong... but it seems to me that you missed react script in *.html file. Please add:

<script src="<path to your react script - index.js" ></script>

answered Dec 31 '18 at 12:48

miuosh

12312

I'm not using flask so maybe I'm wrong... but it seems to me that you missed react script in *.html file. Please add:

<script src="<path to your react script - index.js" ></script>

answered Dec 31 '18 at 12:48

miuosh

12312

answered Dec 31 '18 at 12:48

miuosh

12312

answered Dec 31 '18 at 12:48

miuosh

12312

answered Dec 31 '18 at 12:48

miuosh

12312

My html file is located in a folder with a different parent than the js file, how do I format this call? I know that I can access parent with '../', but to access the parent's parent, can i just do '../../'? @miuosh

– Pambalos
Dec 31 '18 at 17:57

Your should format path to point to root folder (public) which is determined by web server like IIS or Express.

– miuosh
Jan 6 at 16:05

add a comment |

My html file is located in a folder with a different parent than the js file, how do I format this call? I know that I can access parent with '../', but to access the parent's parent, can i just do '../../'? @miuosh

– Pambalos
Dec 31 '18 at 17:57

Your should format path to point to root folder (public) which is determined by web server like IIS or Express.

– miuosh
Jan 6 at 16:05

My html file is located in a folder with a different parent than the js file, how do I format this call? I know that I can access parent with '../', but to access the parent's parent, can i just do '../../'? @miuosh

– Pambalos
Dec 31 '18 at 17:57

Your should format path to point to root folder (public) which is determined by web server like IIS or Express.

– miuosh
Jan 6 at 16:05

add a comment |

answered Dec 31 '18 at 14:21

Masoud Tahmasebi

add a comment |

answered Dec 31 '18 at 14:21

Masoud Tahmasebi

add a comment |

answered Dec 31 '18 at 14:21

Masoud Tahmasebi

answered Dec 31 '18 at 14:21

Masoud Tahmasebi

answered Dec 31 '18 at 14:21

Masoud Tahmasebi

answered Dec 31 '18 at 14:21

Masoud Tahmasebi

answered Dec 31 '18 at 14:21

Masoud Tahmasebi

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk