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
}
Related
I am new to React and trying to add the Floating Menu Button from this Package.
Adding this I get following Error.
Parsing error: Unexpected token
I have uploaded the Code.
https://codesandbox.io/s/adding-floatingmenu-2tfxe?file=/src/App.js
I also have another Question. What is the difference of adding render() {} infront of return() or just leaving return()?
Update
I have Updated my Code inside codesandbox, there i do not receive an Error, after I copied it into VSCode i receive following error.
You can use react hooks only in functional components. If you use class components you not allowed to use hooks.
But what is a Hook?
Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.
Second question the same situation, render() uses in class components, in functional components you just use return(<></>)
Please read hooks owerview:
https://reactjs.org/docs/hooks-overview.html
If you want to initialize the isOpen state as false, here's a minimal example of that
import React, { Component } from "react";
import {
FloatingMenu,
MainButton,
ChildButton,
} from "react-floating-button-menu";
export default class Login extends Component {
constructor(props) {
super(props)
this.state = {
isOpen: false
}
}
render() {
return (
<FloatingMenu
slideSpeed={500}
direction="up"
spacing={8}
isOpen={this.state.isOpen}
>
<MainButton
backgroundColor="black"
onClick={() => this.setState({ open: !this.state.isOpen })}
size={56}
/>
</FloatingMenu>
);
}
};
Make sure you import Component from 'react' at the top. Render method is required when you're making a React component using a class method which you are using. It's a type of lifecycle method which is invoked when the component needs to update. The return statement only returns the data/JSX elements wherever it is being used.
If you are using functional components, you don't need a render method since they return the react elements themselves
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";
Hi I am getting this error while implementing date picker
I take help from these URLs:
http://dev.quri.com/react-bootstrap-datetimepicker/
https://github.com/Eonasdan/bootstrap-datetimepicker
here is my code
https://codesandbox.io/s/18941xp52l
render() {
const { date, format, mode, inputFormat } = this.state;
return (
<DateTimeField
dateTime={date}
format={format}
viewMode={mode}
inputFormat={inputFormat}
onChange={this.handleChange}
/>
);
}
react-bootstrap-datetimepicker is an old package. It tries to import PropTypes from React module, however, the export was removed by React team from version 16+.
I suggest you to use alternatives like react-dates.
i need to make react-day picker component compatible with redux form. I know this is not absolutey right but redux form is manadatory for my current project. But i struggle to make it. I used react date picker which i made it compatible with this way:
import React from 'react';
import { PropTypes } from 'prop-types';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import { injectIntl, intlShape } from 'react-intl';
import 'react-datepicker/dist/react-datepicker.css';
const MyDatePicker = props => (
<div>
<DatePicker
{...props.input}
dateFormat="DD-MM-YYYY"
selected={props.input.value
? moment(props.input.value, 'DD-MM-YYYY')
: null}
placeholderText={props.placeholder}
disabled={props.disabled}
/>
{
props.meta.touched && props.meta.error &&
<span className="error">
{ props.intl.formatMessage({ id: props.meta.error }) }
</span>
}
</div>
);
MyDatePicker.propTypes = {
input: PropTypes.shape().isRequired,
placeholder: PropTypes.string,
disabled: PropTypes.bool,
meta: PropTypes.shape().isRequired,
intl: intlShape.isRequired
};
export default injectIntl(MyDatePicker);
but i struggle to make it with react day picker. Can anyone help me for achieving this?
I had a similar issue months back where the project called for redux forms and a date picker. The solution I came to was to wrap the date picker into it's own component and then wrap that component in another component, which then got used as a custom input component in redux forms.
I imagine you won't have to wrap as many times as I did but the concept should still be similar. Take a look at the code in this question as it shows an example of how to incorporate a date picker with redux-forms:
How to onFocus and onBlur a React/Redux form field that's connected to React Date Picker?
I’m trying to use clipboard.js in a React component, and it causes my devserver to start failing with the Node error:
ReferenceError: Element is not defined
at Object.<anonymous> (/mnt/home/me/code/board/webapp/node_modules/matches-selector/index.js:6:13)
I initialize the clipboard in componentDidMount but am still getting this error. I actually think the error may have something to do with my import, because even when I don’t actually initialize the clipboard (but include the import) I get the error. Does anyone have an idea what I might be doing wrong?
Relevant code (styling excluded):
import React, { Component } from 'react';
import Clipboard from 'clipboard';
export default class CodeSnippet extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
new Clipboard('.copyButton', {
target: () => document.getElementById('snippet')
});
}
render() {
return (
<div style={styles.snippetCopy}>
<div id="snippet" style={styles.snippet}>
{'this text will copy'}
</div>
<button
className={"copyButton"}
id="clipper"
data-clipboard-text='snippet'
style={styles.buttonStyle}
text={'Copy code'}>
</button>
</div>
);
}
}
You can't require clipboard.js if you're doing server side rendering. It's annoying but instead of installing via npm, they suggest including the script manually like this:
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
https://github.com/zenorocha/clipboard.js/issues/157
I created a fiddle updating your code. It's a suggestion of integrating clipboardjs and React, using ref's and clipboardjs' text function.
Check here: https://jsfiddle.net/mrlew/L54ky6hj/