I am using this module by HackerOne: https://reactdatepicker.com
After installing and importing the module to my Project i decided to pick the Select time component from the site.
My Code
import React, { Component } from "react";
import { Form, Button } from "react-bootstrap"
import DatePicker from "react-datepicker"
export default class AddEventModal extends Component {
constructor(props) {
super(props)
this.state = {
date: new Date()
}
}
render() {
return (
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Label>Title <span style={{ color: "red" }}>*</span></Form.Label>
<Form.Control type="text" placeholder="Enter a Title" className="col-6" />
<Form.Text className="text-muted">
Enter a Title for your Event.
</Form.Text>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Description</Form.Label>
<Form.Control type="text" placeholder="Enter a Description" className="col-6" />
</Form.Group>
<DatePicker
selected={this.state.date}
onChange={newDate => this.setState({ date: newDate })}
showTimeSelect
timeFormat="HH:mm"
timeIntervals={15}
timeCaption="time"
dateFormat="MMMM d, yyyy h:mm aa"
/>
<Form.Group controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="success" type="submit">
Submit
</Button>
</Form>
);
}
}
My Output
https://i.stack.imgur.com/2L1Rv.png
It shouldn't be like this... The site has the working demo. What am I doing wrong?
EDIT: Answer is in the comments. I was missing a css import
Seems like I was missing a css import. Too bad the site didn't mention this clearly.
import "react-datepicker/dist/react-datepicker.css"
Related
I would need to set the text of the Label, for the Formik Input Component, after the input field.
I am not sure how to target it and how to apply CSS.
So a code sample:
<div className="editable-job-title">
{isEditing ? (
<Formik
validateOnMount={true}
enableReinitialize
initialValues={user}
validationSchema={userNameValidationSchema}
onSubmit={handleSubmit}>
{(props) => (
<Form>
<Input
name="job_title"
type="text"
label={t('userForm.job_title.label')}
/>
<FormActions className="user-form-page__form-action">
<RoundButton
type="button"
onClick={stopEditing}
className="button button--cancel">
<Icon icon={x} />
</RoundButton>
</Form>
)}
</Formik>
So basically, I would need the Job Title text to be below the field.
Or any other nice solution.
I guess you want to use <Field> element from formik.
If this is the case, check it out on https://codesandbox.io/s/formik-tests-onchange-mo4fi?file=/src/App.js
import { Field, Formik, Form } from "formik";
import { TextField } from "#material-ui/core";
<Formik
initialValues={initialValues}
onSubmit={() => alert("submitted!")}
>
<Form>
<Field name="email">
{(props) => (
<>
<TextField
variant="outlined"
placeholder={props.field.name}
label={props.field.name}
{...props.field}
/>
</>
)}
</Field>
...
Currently doing a project with Material-UI's library. Im having issues with styling.
I'm pretty new to ReactJS or just JS in general, and doing this project is my first time I am interacting with it.
Any help will be greatly appreciated!
I am unable to style my text box like the way example they gave.
this is my code:
class AppBase extends Component {
constructor(props) {
super(props);
this.state = {
...INITIAL_STATE
};
}
classes = useStyles;
render() {
return (
<Container component="main" maxWidth="md">
<div className={this.classes.root}>
<TextField required id="standard-required" label="Required" defaultValue="Hello World" />
<TextField disabled id="standard-disabled" label="Disabled" defaultValue="Hello World" />
<TextField
id="standard-password-input"
label="Password"
type="password"
autoComplete="current-password"
/>
<TextField
id="standard-read-only-input"
label="Read Only"
defaultValue="Hello World"
InputProps={{
readOnly: true,
}}
/>
<TextField
id="standard-number"
label="Number"
type="number"
InputLabelProps={{
shrink: true,
}}
/>
<TextField id="standard-search" label="Search field" type="search" />
<TextField
id="standard-helperText"
label="Helper text"
defaultValue="Default Value"
helperText="Some important text"
/>
</div>
</Container>
);
}
}
This example I have taken is from: https://codesandbox.io/s/51hrm
I have copied the useStyles exactly at the top, and this is what I get:
How the code looks like
This is not the only instance where I am facing this issue with calling useStyles in my components.
Calling 'classes = useStyles;' works on some useStyles but not the others, I am really at lost for this.
Because of the way the other pages has been done, I will not consider using Functions like the example given.
Thank you in advance!
If you're copying the useStyles function from the example provide, then it needs to be called as a function. Right now, you're just assigning the function to the classes variable, but never executing the function. So just change the one line of code as follows:
const classes = useStyles();
And you will execute the useStyles function and assign the result to the classes variable. At that point, you'll be able to use the classes constant in your jsx to style the components, like the example:
<form className={classes.root} ...></form>
useStyles hook can only be called inside a functional component. You have to change your class component to functional component if you want to use useStyles hook.
I have created a live sandbox for you to play around also: https://codesandbox.io/s/loving-bouman-47bek?fontsize=14&hidenavigation=1&theme=dark
The code below should work fine:
import React from "react";
import ReactDOM from "react-dom";
import { Container, TextField } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({
root: {
background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
border: 0,
borderRadius: 3,
boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
color: "white",
height: 48,
padding: "0 30px"
}
});
function App() {
const classes = useStyles();
return (
<Container component="main" maxWidth="md">
<div className={classes.root}>
<TextField
required
id="standard-required"
label="Required"
defaultValue="Hello World"
/>
<TextField
disabled
id="standard-disabled"
label="Disabled"
defaultValue="Hello World"
/>
<TextField
id="standard-password-input"
label="Password"
type="password"
autoComplete="current-password"
/>
<TextField
id="standard-read-only-input"
label="Read Only"
defaultValue="Hello World"
InputProps={{
readOnly: true
}}
/>
<TextField
id="standard-number"
label="Number"
type="number"
InputLabelProps={{
shrink: true
}}
/>
<TextField id="standard-search" label="Search field" type="search" />
<TextField
id="standard-helperText"
label="Helper text"
defaultValue="Default Value"
helperText="Some important text"
/>
</div>
</Container>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Also I would hight suggest you to start using functional components instead of class components since the functional components are the future of React.
I'm still relatively new to working with redux form, as it is still very much black magic as to how it works, especially when it comes to prepopulating fields from data, it seems to just "happen".
Well I'm in the process of adding a <FieldArray> to an existing form that gets populated from data from an epic Observable's data. The problem is that the data that comes back is causing an error to occur
Uncaught TypeError: b.equals is not a function
at equals (index.js?3bd9:52)
at ConnectedFieldArray.shouldComponentUpdate (ConnectedFieldArray.js?c38c:87)
at checkShouldComponentUpdate (react-dom.development.js?61bb:11191)
at updateClassInstance (react-dom.development.js?61bb:11640)
at updateClassComponent (react-dom.development.js?61bb:14648)
at beginWork (react-dom.development.js?61bb:15598)
at performUnitOfWork (react-dom.development.js?61bb:19266)
at workLoop (react-dom.development.js?61bb:19306)
at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:199)
The only thing that makes sense to me is that the component that houses the <Field> elements are not matching up, in order for redux to populate the fields appropriately.
Here is my component that is fed into the <FieldArray> in my redux form:
import PropTypes from 'prop-types';
import React, { Fragment } from 'react';
import { Field } from 'redux-form/immutable';
const renderField = ({ input, label, type, meta: { touched, error } }) => (
<div>
<label>{label}</label>
<div>
<input {...input} type={type} placeholder={label} />
{touched && error && <span>{error}</span>}
</div>
</div>
);
const FormMilestones = ({ fields, meta }) => (
<Fragment>
{fields.map((milestone, index) => {
console.log('milestone?', milestone);
return (
<div key={index}>
<button
type="button"
title="Remove milestone"
onClick={() => fields.remove(index)}
/>
<Field
name={`${milestone}.name`}
component={renderField}
fullWidth
autoFocus
label="Milestone name"
/>
<Field
name={`${milestone}.startingAt`}
component={renderField}
fullWidth
autoFocus
label="Start date"
/>
<Field
name={`${milestone}.endingAt`}
component={renderField}
fullWidth
autoFocus
label="Ending At"
/>
<Field
name={`${milestone}.description`}
component={renderField}
fullWidth
autoFocus
label="Description"
/>
</div>
);
})}
<button type="button" onClick={() => fields.push()}>
+ Add Milestone
</button>
</Fragment>
);
FormMilestones.propTypes = {
fields: PropTypes.object.isRequired,
meta: PropTypes.object,
};
export default FormMilestones;
And here is the <FieldArray> that's used in my redux form. I didn't bother to copy the entire form, unless it's necessary, since my functionality issue exists within my <FormMilestones> component.
<FieldArray
name="milestones"
component={FormMilestones}
/>
Does anything obvious pop out to anyone?
Thanks in advance!
I'm trying to use redux-form
// rootRedcer.ts
import { combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'
import translation from './translation/reducer'
export default combineReducers({
form: formReducer,
translation,
})
// components/DashboardHome/index.tsx
import { connect } from 'react-redux'
import DashboardHome from './Home'
export default connect()(DashboardHome)
// components/DashboardHome/DashboardHome.tsx
import * as React from 'react'
import { Field, reduxForm } from 'redux-form'
function handleSubmit(value) { console.log(value) }
const DashboardHome = () => (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="firstName">First Name</label>
<Field name="firstName" component="input" type="text" />
</div>
<div>
<label htmlFor="lastName">Last Name</label>
<Field name="lastName" component="input" type="text" />
</div>
<div>
<label htmlFor="email">Email</label>
<Field name="email" component="input" type="email" />
</div>
<button type="submit">Submit</button>
</form>
)
export default reduxForm({
form: 'registration'
})(DashboardHome)
But I get an error
Failed prop type: The prop `fields` is marked as required in
`ReduxForm(DashboardHome)`, but its value is `undefined`.
What is the reason of error? What I'm doing wrong?
Thanks
I downgraded my 'react' and 'react-dom' package from the current version(v16.8.4) to 16.6.3, and the error is gone. There might be a conflict between react-dom and redux-form.
Downgrading didn't work for me.
Switched to
formik
As I see redux-form has broken changes. Demo example doesn't work
iam using the latest version of meteor & react. Yesterday I switched to the newest version of bootstrap. Before that everything worked just fine now I canĀ“t fix my (really noobish) problem.
import React, {Component} from 'react';
import { FormControl, , etc. } from 'react-bootstrap';
export default class Login extends Component {
login(event) {
event.preventDefault();
var username = this.refs.inputName.refs.input.value.trim();
var password = this.refs.inputPw.refs.input.value.trim();
Meteor.loginWithPassword(username, password, function (error) {
if (error) {
...
}
else {
FlowRouter.go('/c/' + Meteor.user().username);
}
});
this.refs.password.refs.input.value = "";
}
render() {
return (
<Row>
<Col xs={3} xsOffset={4}>
<form onSubmit={this.login.bind(this)}>
<FormGroup>
<ControlLabel>Willkommen</ControlLabel>
<FormControl
type="text"
placeholder="Benutzername"
ref="inputName"
name="username"/>
</FormGroup>
<FormGroup>
<FormControl
placeholder="Password"
ref="inputPw"
name="password"
type="password"/>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Button bsStyle="primary" label="Login" id="loginButton" type="submit" active>Login</Button>
</Col>
</FormGroup>
</form>
</Col>
</Row>
);
}
In my previous solution I used a simple input form. Due to deprecation I switched to this formControl stuff. Now it seems that
<form onSubmit={this.login.bind(this)}>
login never gets called. Console.log(username) returns undefined.
Thanks in advance and many greetings.
//edit 1:
It seems like Iam not the only one with this problem.
React-bootstrap Form getValue not a function
This helped me a lot to find my solution:
import ReactDom from 'react-dom';
var username = ReactDom.findDOMNode(this.refs.inputName).value;
var password = ReactDom.findDOMNode(this.refs.inputPw).value;