How to get react-datepicker in a Component to work

Question

Another noob question.

Background:

I have a JSP solution and wants to evolve that to a react solution. I've got the most of it to work. It has a few(5) components + index.js. At the moment I'm working on the log display page and need 2 datepickers.

I cant even get one to work.

Code:

The folowing is index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { CookiesProvider } from 'react-cookie';
import './index.css';
import MainMenu from './components/MainMenu'
import MainPage from './components/MainPage'
import Clients from './components/Clients'
import Logs from './components/Logs'
import Packages from './components/Packages'
const MURL='http://172.16.0.174:8080/';

class CabinCTRLGui extends React.Component{
    constructor(props){
        super(props);
        this.state = {panel: "main"};
        this.handlePanelClick = this.handlePanelClick.bind(this);
    }

    handlePanelClick(param){
        // alert("handlePanelClick: " + param);
        this.setState({
        panel: "" + param
        });
    }

    render(){
        // const masterURL='http://172.16.0.174:8080/';
        console.log(this.state.panel)
        return(
        <div className="main-panel">
            <MainMenu handlePanelClick={this.handlePanelClick}/>
            { this.state.panel === "main" && <MainPage  />}
            { this.state.panel === "clients" && <Clients MURL={MURL}/>}
            { this.state.panel === "logs" && <Logs MURL={MURL}/>}
            { this.state.panel === "packages" && <Packages MURL={MURL}/>}
        </div>
        )
    }
}

// ========================================

ReactDOM.render(
    <CookiesProvider>
    <CabinCTRLGui />
    </CookiesProvider>,
document.getElementById('root')
);

The following is the Logs.js - a "copy" of the html code from the JSP. I probably missed a few class->className and so on.

import React from 'react'


class Logs extends React.Component{


  render(){
    return (
      <div
        className="logs-page">
        Logs Page
        <div id="logs-filter-panel">
                    <form id="updateLogForm" method="POST" action="index.jsp">
                        Page:
            <input
              id="log_page_input"
              name="log_page_input"
              type="text"
              value="1"
              />
            Page size:
            <input
              id="log_page_size_input"
              name="log_page_size_input"
              type="text"
              value="25"
              />
            <label for="startdt">
                Start Date:
            </label>
            <input
              type="text"
              class="dtpicker"
              name="startdt"
              id="startdt"
              value="1970-01-01 01:01"
              />
            <label for="enddt">
              End Date:
            </label>
            <input
              type="text"
              class="dtpicker"
              name="enddt"
              id="enddt"
              value="2021-03-12 09:38"
              />
              <label for="log_level_input_select">
                             Level:
              </label>
              <select
                id="log_level_input_select"
                name="log_level_input_select">
                                <option id="-1">ALL</option>
                                <option id="1" selected="">ERROR</option>
                                <option id="0">UNKNOWN</option>
                                <option id="3">INFO</option>
                                <option id="2">WARNING</option>
                                <option id="4">DEBUG</option>
                                <option id="2">WARN</option>
                        </select>
            <label for="log_name_input_select">
               Log:
            </label>
            <select
              id="log_name_input_select"
              name="log_name_input_select">
                 <option id="DISKFREE">DISKFREE</option>
                  <option id="KERN">KERN</option>
                                <option id="AUTH">AUTH</option>
                                <option id="MESSAGES">MESSAGES</option>
                                <option id="DPKG">DPKG</option>
                                <option id="SYSLOG">SYSLOG</option>
                                <option id="CABINCTRL" selected="">CABINCTRL</option>
                                <option id="DAEMON">DAEMON</option>
                                <option id="USER">USER</option>
                                <option id="DISKUSAGE">DISKUSAGE</option>
                                <option id="DEBUG">DEBUG</option>
                        </select>
            <input
              type="hidden"
              id="log_filter_action"
              name="action"
              value="getLog"
            />
            <input
              id="log_filter_submit"
              type="submit"
              name="Send"
              value="Send"
            />
                    </form>
                </div>
        <div id="logs-display-panel">display
            <table id="log_table">
                 <tbody>
             <tr>
               <th>Line</th>
               <th>Date</th>
               <th>Logger</th>
               <th>Level</th>
               <th>Message</th>
             </tr>
             <tr class="white">
               <td>1</td>
               <td>2021-01-03T16:20:14.960</td>
               <td>cabin_ctrl_logger</td>
               <td>ERROR</td>
               <td>('Connection aborted.', error(104, 'Connection reset by peer'))</td>
             </tr>
           </tbody>
         </table>
         </div>
      </div>
     )
  }
}

export default Logs

So far I've noticed that "all" tutorials basically adds 3 things

1) import React, { useState } from "react";

```import DatePicker from "react-datepicker";```

```import "react-datepicker/dist/react-datepicker.css";```

const [startDate, setStartDate] = useState(new Date());
<DatePicker selected={startDate} onChange={date => setStartDate(date)} />

No matter where I put these things the page either breaks or goes blank.

After adding import and const I get 3 warnings - defined but not used

After adding the third the page goes blank.

Logs.js after additions.

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const [startDate, setStartDate] = useState(new Date());

class Logs extends React.Component{


  render(){
    return (
      <div
        className="logs-page">
        Logs Page
        <div id="logs-filter-panel">
                    <form id="updateLogForm" method="POST" action="index.jsp">
                        Page:
            <input
              id="log_page_input"
              name="log_page_input"
              type="text"
              value="1"
              />
            Page size:
            <input
              id="log_page_size_input"
              name="log_page_size_input"
              type="text"
              value="25"
              />
            <label for="startdt">
                Start Date:
            </label>
            <DatePicker selected={startDate} onChange={date => setStartDate(date)} />
            <input
              type="text"
              class="dtpicker"
              name="startdt"
              id="startdt"
              value="1970-01-01 01:01"
              />
            <label for="enddt">
              End Date:
            </label>
            <input
              type="text"
              class="dtpicker"
              name="enddt"
              id="enddt"
              value="2021-03-12 09:38"
              />
              <label for="log_level_input_select">
                             Level:
              </label>
              <select
                id="log_level_input_select"
                name="log_level_input_select">
                                <option id="-1">ALL</option>
                                <option id="1" selected="">ERROR</option>
                                <option id="0">UNKNOWN</option>
                                <option id="3">INFO</option>
                                <option id="2">WARNING</option>
                                <option id="4">DEBUG</option>
                                <option id="2">WARN</option>
                        </select>
            <label for="log_name_input_select">
               Log:
            </label>
            <select
              id="log_name_input_select"
              name="log_name_input_select">
                 <option id="DISKFREE">DISKFREE</option>
                  <option id="KERN">KERN</option>
                                <option id="AUTH">AUTH</option>
                                <option id="MESSAGES">MESSAGES</option>
                                <option id="DPKG">DPKG</option>
                                <option id="SYSLOG">SYSLOG</option>
                                <option id="CABINCTRL" selected="">CABINCTRL</option>
                                <option id="DAEMON">DAEMON</option>
                                <option id="USER">USER</option>
                                <option id="DISKUSAGE">DISKUSAGE</option>
                                <option id="DEBUG">DEBUG</option>
                        </select>
            <input
              type="hidden"
              id="log_filter_action"
              name="action"
              value="getLog"
            />
            <input
              id="log_filter_submit"
              type="submit"
              name="Send"
              value="Send"
            />
                    </form>
                </div>
        <div id="logs-display-panel">display
            <table id="log_table">
                 <tbody>
             <tr>
               <th>Line</th>
               <th>Date</th>
               <th>Logger</th>
               <th>Level</th>
               <th>Message</th>
             </tr>
             <tr class="white">
               <td>1</td>
               <td>2021-01-03T16:20:14.960</td>
               <td>cabin_ctrl_logger</td>
               <td>ERROR</td>
               <td>('Connection aborted.', error(104, 'Connection reset by peer'))</td>
             </tr>
           </tbody>
         </table>
         </div>
      </div>
     )
  }
}

export default Logs

If I remove the <DatePicker ... line the page is still blank.

Questions:

Is it possible to user react-datepicker in a react Component?
Where should I put the three parts in my original Logs.js?
Why does the page go blank?
What else, regarding react-datepicker, is wrong?

Remember, I am a noob and my code is according.

If you know of a working tutorial, please add a url to your answer.

score 0 · Answer 1 · answered Feb 23 '21 at 13:19

Main problem, as far as I can figure out, was the nodejs and npm delivered by Debian. They are not compatible. I installed version 14 LTS of nodejs and that helpt.

Answers.

Yes it is possible to use react-datepicker in a react Component.

The imports goes at the top. I placed them under import of React....

I put the state declaration in the constructor:

this.state = {
    startDate: null,
     endDate: new Date()
}

I placed the <DatePicker tag inside my render.

        <DatePicker
          id="startDatePicker"
          selected={this.state.startDate}
          onChange={(e) => this.setSelectedDate(e, 'startDate')}
          startDate={this.state.startDate}
          endDate={this.state.endDate}
          maxDate={new Date()}
          dateFormat="yyyy-MM-dd HH:mm"/>

I assume it was the mismatch in version from Debian that made the page go blank.

How to get react-datepicker in a Component to work

1 Answers1