We are upgrading from version 5.5.3 of react-day-picker to the latest version (7.1.10). I have looked at the documentation for breaking changes and modified our code accordingly. I have even changed our code to look like the code in the documentation but I cannot get the onDayChange event to fire when selecting a date from the calendar.
The handleDayChange function never fires. I have no idea why not. What am I missing?
import React from 'react'
import DayPickerInput from 'react-day-picker/DayPickerInput'
import './input-with-calendar.scss'
const dateFormat = 'MM/DD/YYYY'
export default class InputWithCalendar extends React.Component {
constructor(props) {
super(props)
this.handleDayChange = this.handleDayChange.bind(this)
this.state = { selectedDay: undefined }
}
handleDayChange(day) {
console.log('In handleDayChange')
this.setState({ selectedDay: day })
}
render() {
const { selectedDay } = this.state
return (
<div className='input-with-calendar'>
<div className='overlay-date-picker-container'>
{selectedDay && <p>Day: {selectedDay.toLocaleDateString()}</p>}
{!selectedDay && <p>Choose a day</p>}
<DayPickerInput onDayChange={this.handleDayChange} />
</div>
</div>
)
}
}
This is the 5.5.3 code...this works
import React from 'react'
import DayPickerInput from 'react-day-picker/DayPickerInput'
import './input-with-calendar.scss'
import moment from 'moment'
const dateFormat = 'MM/DD/YYYY'
const formatDate = (date) => {
return date && moment(date).format(dateFormat)
}
class InputWithCalendar extends React.Component {
componentWillMount () {
this.props.onDateChange(this.props.selectedDate)
}
render () {
return (
<div className='input-with-calendar'>
<div className='input-with-calendar-filter-label'>Date</div>
<div className='overlay-date-picker-container'>
<DayPickerInput
readOnly
value={formatDate(this.props.selectedDate)} // value is expected to be a string
placeholder={dateFormat}
onDayChange={(dateAsMoment) => this.props.onDateChange(dateAsMoment && dateAsMoment.toDate())}
dayPickerProps={{
weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
disabledDays: { before: new Date() }
}}
/>
</div>
</div>
)
}
}
export default InputWithCalendar
I believe you are missing the value prop:
<DayPickerInput
value={this.state.selectedDay}
onDayChange={this.handleDayChange}
/>
See http://react-day-picker.js.org/examples/input-state
Related
I'm new to React Typerscript, and I'm trying to figure out how to pass useModal function from RsvpPage to EventDescriptionPage.
`
import Modal from "./Modal";
import useModal from "./UseModal";
class EventDescriptionPage extends Component<any,any> {
constructor(props:any){
super(props);
}
render(){
return (
<div onClick={this.props.useModal}>
<button className='button' onClick={this.props.toggle}> RSVP </button>
<Modal isOpen={this.props.isOpen} toggle={this.props.toggle}></Modal>
</div>
</header>
</div>
);
}
}
export default EventDescriptionPage;
`
`
import EventDescriptionPage from "./EventDescriptionPage";
import Modal from "./Modal";
import useModal from "./UseModal";
function RsvpPage(){
const { isOpen, toggle } = useModal();
return (
<div>
<EventDescriptionPage/>
</div>
);
}
export default RsvpPage;
`
`
import { useState } from "react";
export default function UseModal() {
const [isOpen, setisOpen] = useState(false);
const toggle = () => {
setisOpen(!isOpen);
};
return {
isOpen,
toggle
};
}
`
`
import React, { ReactNode } from "react";
import "./Modal.css";
interface ModalType {
children?: ReactNode;
isOpen: boolean;
toggle: () => void;
}
export default function Modal(props: ModalType) {
return (
<>
{props.isOpen && (
<div className="modal-overlay" onClick={props.toggle}>
<div onClick={(e) => e.stopPropagation()} className="modal-box">
{props.children}Abaabaabaaba
</div>
</div>
)}
</>
);
}
`
I think my syntax is not right, but I'm not sure how to access useModal() function in RsvpPage.esx file.
I'm working with treebeard in my react project.
when I try to add a user-defined style it's not getting applied to the container.
I have tried different methods to achieve this.
I tried to define the style from tag, tried to define style.css in a different file, import it and assign it to style in Treedeard tag.
the main goal is to change the background color and the position.
Here is my code:
workspace.jsx
import React from "react";
import {Treebeard} from 'react-treebeard';
import data from "./data";
export class WorkSpace extends React. Component {
constructor(props){
super(props);
this.state = {
data: {data}
};
this.onToggle = this.onToggle.bind(this);
const decorators = {
Container: (props) => {
return (
<div style={props.backgroundColor="yellow"}>
</div>
);
}
};
}
onToggle(node, toggled){
const {cursor, data} = this.state.data;
if (cursor) {
this.setState(() => ({cursor, active: false}));
}
node.active = true;
if (node.children) {
node.toggled = toggled;
}
this.setState(() => ({cursor: node, data: Object.assign({}, data)}));
}
render() {
return (
<div className="base_container">
<h3>Select Component</h3>
<div className="components">
<Treebeard
data={data}
onToggle={this.onToggle}
style = {style_components}
decorators={this.decorators}
/>
</div>
</div>
);
}
}
Im using React date picker http://react-day-picker.js.org/
Im using the today button:
http://react-day-picker.js.org/examples/customization-today-button/
The default behaviour for the today button is to navigate to the current month but not select the actual day. How can I make it select the actual day? This is updating the selectedDay state in this code example
import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';
export default class BasicConcepts extends React.Component {
constructor(props) {
super(props);
this.handleDayClick = this.handleDayClick.bind(this);
this.state = {
selectedDay: undefined,
};
}
handleDayClick(day) {
this.setState({ selectedDay: day });
}
render() {
return (
<div>
<DayPicker onDayClick={this.handleDayClick} />
{this.state.selectedDay ? (
<p>You clicked {this.state.selectedDay.toLocaleDateString()}</p>
) : (
<p>Please select a day.</p>
)}
</div>
);
}
}
You can use onTodayButtonClick and set the day as selected:
<DayPicker
selectedDays={this.state.selectedDay}
todayButton="Select today"
onTodayButtonClick={day=>this.setState({selectedDay: day})
/>
I just want to pass an object document from the Container to my component and use it. The code of container is this:
import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';
import { Projects } from '/imports/api/projects.js';
import ProjectFormUpdate from './ProjectFormUpdate.jsx';
export default ProjectFormUpdateContainer = withTracker(({ key1 }) => {
Tracker.autorun(() => {
const sub = Meteor.subscribe('projects');
if (sub.ready()){
const oneProject = Projects.findOne(key1);
console.log(oneProject.nombre);
}})
return {
oneProject,
};
})(ProjectFormUpdate);
And i use it in my presentational component on this way:
render() {
const { oneProject, isLoading } = this.props;
if (!isLoading)
return (
<div className="col-xs-11">
<div className="box box-solid">
<form className="form" onSubmit={this.handleSubmit.bind(this)} >
<div className="box-body">
<div className="row">
<div className="col-xs-2">
<input
className = "form-control input-sm"
type="text"
ref="codigoInput"
placeholder="Código del Proyecto"
//THE PROBLEM HERE!!!!!
value = {this.props.oneProject.nombre}
onChange = {this.handleUpdate.bind(this)}
/>
</div>
...
But i get this error:
TypeError: Cannot read property 'nombre' of undefined
The problem is line:
//THE PROBLEM HERE!!!!!
value = {this.props.oneProject.nombre}
This will work fine once things have loaded. You need to return isLoading from the container component.
I would also recommend using oneProject by itself since you get it at the top of render in any case:
const { oneProject, isLoading } = this.props;
I have been trying to display the Username of a Logged in user using Tracker React.
I have removed the auto-publish package.
/Client/components/dashboard/sidebar.jsx
import React, {Component} from 'react'
import TrackerReact from 'meteor/ultimatejs:tracker-react';
export default class Sidebar extends TrackerReact(Component) {
constructor() {
super();
this.state = {
subscription: {
users: Meteor.subscribe('users')
}
};
}
render() {
return(
<div>
<h1>{Meteor.user().username}</h1>
</div>
);
}
/Server/publications/userPublications
Meteor.publish("users", function () {
return Meteor.users.find();
});
I am getting a null object while console.log(Meteor.user()). However, I can see the current username using the Meteor DevTools for chrome.
What block of puzzle am I missing?
I doubt you can use Meteor.user(). username
Try this instead
<h1>{{currentUser}}</h1>
You can use createContainer in order to manage it.
import { Meteor } from 'meteor/meteor';
import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
export class Sidebar extends Component {
static propTypes = {
loggedIn: PropTypes.bool.isRequired,
loggingIn: PropTypes.bool.isRequired,
currentUser: PropTypes.shape({
username: PropTypes.string
})
}
render() {
const { loggingIn, loggedIn } = this.props;
return (
<div>
{(() => {
if (loggingIn) {
return <Loading />
} else if (loggedIn) {
// whatever you want here.
} else {
<h1>Please Log In</h1>
}
})()}
</div>
)
}
}
export default createContainer(() => ({
user: Meteor.user(),
loggedIn: !Meteor.userId(),
loggingIn: Meteor.loggingIn()
}), Sidebar);
A few details here:
Meteor.loggingIn() is a reactive variable that is run while the user is logging in. When this is happening, there will not be a user object.
You should create a reactive container