How to make react-datepicker display properly? - javascript

I cannot make the component react-datepicker display properly.
it actually displays like this.
I wish it could display at least like the documentation for the component does.
I first thought it was a dependency problem, and added all the dependencies the doc says are needed. The result is still the same.
Some stackoverflow questions talked about this and referred to a missing stylesheet. However I imported everything with npm, so that shouldn't be the problem.
My class component looks like this :
import React from "react";
import "./style.css";
import DatePicker from "react-datepicker";
class Filters extends React.Component {
constructor(props) {
super(props);
this.state = {
startDate : new Date()
};
this.handleStartChange = this.handleStartChange.bind(this);
}
handleStartChange = (date) => {
this.setState({
startDate : date
})
}
render() {
return (
<div className="filters">
<div id="filterbox">
<p id="titre">Filtres</p>
<DatePicker
selected={this.state.startDate}
onChange={this.handleStartChange} />
</div>
</div>
)
}
}
export default Filters;
I apologize in advance if the problem is very obvious, I'm quite new to reactjs.

You forgot to import the package css.
From the documentation:
import "react-datepicker/dist/react-datepicker.css";

I think you have to import the react-datepicker.css too, not only the package itself.
import "react-datepicker/dist/react-datepicker.css";
Below is a simple example of how to use the Datepicker in a React
view. You will also need to require the CSS file from this package (or
provide your own). The example below shows how to include the CSS from
this package if your build system supports requiring CSS files
(Webpack is one that does).

you haven't imported their css file.
import "react-datepicker/dist/react-datepicker.css";

Related

`npm init react-app` leads to `'React' is not defined no-undef` when changing function component to class component

I used npm init react-app appname which creates, among other files, App.js. In that file is a function component:
function App() {
return (
<SomeJSX />
);
}
I edited the function component into a class component, like so:
class App extends React.Component{
render() {
return (
<TheSameJSX />
);
}
}
Now, when I run npm start, I get an error:
Failed to compile
src/App.js
Line 4:19: 'React' is not defined no-undef
Search for the keywords to learn more about each error.
I imagine I need to add some setting somewhere that will automatically include React without me needing to explicitly import it at the top of every file. How do I do this? And why does this npm package not do that by default? I know a bit about javascript (and html and css), and have read a bit about React, but I am completely unaware of how npm or webpack works.
Thanks in advance!
EDIT: To clarify, I know how to import stuff with javascript. I can easily add import React from 'react'; to the file and make it work. However, I find it difficult to believe that adding an import statement to every single javascript file is the recommended method, and I don't understand why this example app wouldn't be set up so as to avoid having to do that. Am I mistaken? Do I really need to manually import the same thing over and over again within the same project? Could I set a global variable to React so that I can use it from wherever?
In your default function component you're not extending any classes and just writing a simple function
function App() {
return (
<SomeJSX />
);
}
In class component, you're in fact extending the Class Component by React.Component provided by React default export object and hence you must import it from the package
//only use one of these
import * as React from "react";
import {Component} from "react"; // you can directly extend without writing `React.` with this import
import React from "react"
So your code would be
import React from "react";
class App extends React.Component{
render() {
return (
<TheSameJSX />
);
}
}
Any of the above imports should be fine with a preference to the first and second one.

React big calendar has no default export

I wanted to use react-big-calendar, I installed the package with npm (version 0.28.0), but I was able to use the component because there is apparently no default export. The exact error is
Attempted import error: 'react-big-calendar' does not contain a
default export (imported as 'BigCalendar').
If I should not use default export, I did not find anywhere what I should import instead.
I used this tutorial in order to make it work. I searched on the internet for similar issue, but I did not find anything that provide a solution.
My code so far is very minimalist, since I was not able to start anything
import BigCalendar from 'react-big-calendar'
import moment from 'moment'
const MyComponent = props => {
const localizer = BigCalendar.momentLocalizer(moment)
return(
<div>
<BigCalendar localizer={localizer}/>
<div>
)
}
Thank you in advance for any response.
I will suggest you to try this out.
// the imports
import { Calendar, momentLocalizer } from 'react-big-calendar'
import 'react-big-calendar/lib/css/react-big-calendar.css';
import moment from 'moment'
const localizer = momentLocalizer(moment)
// The component you should use instead the one you mentioned.
<Calendar localizer={localizer} />
let me know if that works for you, I remember having the same issue and I solved by doing this.
Best regards, I hope it helps!
You should use named exports provided by the library. Additionally library exports Calendar component which should replace your BigCalendar default import.
import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'
const MyComponent = props => {
const localizer = momentLocalizer(moment)
return(
<div>
<Calendar localizer={localizer}/>
<div>
)
}
npm install --save #types/react-big-calendar

What is the best way to create component library for both React and Preact?

I'm currently working on a project which involved both React and Preact. I came across to this where I need to use same component for React and Preact.
Is it a good idea to put the component into npm library package. What are the possible way to create component library for both React and Preact? Looking forward to hear your ideas and discussions.
The code might look like as the following:
React Project: Home.js
import React from 'react'
import Fancy from 'fancy-component/react' // My <Fancy /> component library
class Home extends React.Component {
render() {
return (
<div>
{/* Other parts of the code run here*/}
<Fancy text='🦄' />
</div>
)
}
}
export default Home
Preact Project: AnswerPage.js
import { h, Component } from 'preact'
import Fancy from 'fancy-component/preact' // My <Fancy /> component library
class AnswerPage extends Component {
render() {
return (
// Other Preact codes run here again
<Fancy text='🚀 again' />
)
}
}
export default AnswerPage
Component library: fancy-component
const Fancy = ({ text = '' }) => (
<div>
<span>{`This is so Fancy ✨ ${text}`}</span>
</div>
)
export default Fancy
We did this very thing recently, and because we could not find much information regarding this online it involved quite a bit of trial and error. This is what we ended up with:
Folder Structure:
/apps
/mobile
/desktop
/shared
/components
With preact 10, preact-compat is built in so you don't have to worry having separate components - just use React as normal for the components in your shared folder and preact will automatically alias the imports correctly.
As far as aliasing goes, we added this into our preact.config.js so that we can import the components like #components/Date from the app directory
config.resolve.alias['#components'] = path.resolve(__dirname, '../../shared/components')
For the React app, the only way that I could make that work was to add the aliasing in the babel.config.js like so:
['module-resolver', {
alias: {
'#components': '../../shared/components'
}
}]
I hope that this helps someone else that might be stuck on this!

VSCode bad javascript formatting

I am editing some javascript files (particularly, reactjs coed) in VS Code on Ubuntu 18.04. However, the "formatting" is really terrible.
Before:
import React, { Component } from 'react';
import './App.css';
import Dropzone from 'react-dropzone';
class App extends Component {
render() {
return (
<div className="App">
<Dropzone onDrop={this.onDrop} />
</div>
);
}
}
export default App;
After:
import React, {
Component
} from 'react';
import './App.css';
import Dropzone from 'react-dropzone';
class App extends Component {
render() {
return ( <
div className = "App" >
<
Dropzone onDrop = {
this.onDrop
}
/> <
/div>
);
}
}
export default App;
Previously, I was editing these files on Windows 10 in VS Code, and the formatter was great. Is there an extension I am missing? Or what am I doing wrong here. To format, I am using the "Format Document" keyboard shortcut.
Here are my current extensions:
The culprit for this behavior was Beatify extension on Vscode in my case. Disabling resolved the issue.
Here is the solution,
change the language manually to "javaScript React"
try with your favorite formatter(you can install vs code extensions such as "Prettier","beautify")
Cheers !
I personally use Prettier for JS and CSS formatting, and JS JSX Snippets for JSX in React. I have tried a lot of others, but with those 2 I can assure you your React code will look beautiful.

Why doesn't this component show at all? React DatePicker

Here is the component:
import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
class DatePickerCreater extends Component {
constructor(props){
super(props);
}
render() {
return (
<DatePicker
disabled={this.props.answer.isDisabled}
dateFormat="YYYY/MM/DD"
selected={Date(this.props.answer.value)}
onChange={(e) => this.props.blurHandler(e.target.value,this.props.answer)}
/>
);
}
}
export default DatePickerCreater
when i try to render it, it shows nothing...
Very grateful for every answer!
The selected property takes a moment.js date, not a plain javascript date. You should get an error that says "date.clone is not a function
". You can fix that by using a moment date:
import moment from 'moment';
class DatePickerCreater extends Component {
render() {
return (
<DatePicker
disabled={this.props.answer.isDisabled}
dateFormat="YYYY/MM/DD"
selected={moment(this.props.answer.value)}
onChange={(e) => this.props.blurHandler(e.target.value, this.props.answer)}
/>
)
}
}
Also you may have forgotten to import the react-datepicker css file. Without that the popup will not show correctly:
import 'react-datepicker/dist/react-datepicker.css';
EDIT
Since they switched to using date-fns this answer is outdated. If you are using react-date-picker with a version >=2.0 you can no longer pass a moment.js instance. Instead use native Date objects and manipulate them using date-fns.
For Reference:
Up until version 1.8.0, this package was using Moment.js. Starting
v2.0.0, we switched to using date-fns, which uses native Date objects,
to reduce the size of the package. If you're switching from 1.8.0 to
2.0.0 or higher, please see the updated example above of check out the examples site for up to date examples.
The code is not enough, what can I tell super() need to be called with props:
constructor(props){
super(props);
// ... code
}

Categories