a react beginner want to create a redux form(in a modal) which will performs of post request to a any given database > this is how the modal looks
youll see that ive defined a separate state for each and every input, slider and switch relating which i was confused so as how to call them can someone please check this out and give a possible solution. Thankyou
import React,{ useState } from 'react'
import clsx from 'clsx'
import { Form, Modal, Button, Container, Row, Col } from 'react-bootstrap'
import { withStyles } from '@material-ui/core/styles';
import './Tasks.css'
import { Slider, Switch, FormControlLabel, TextField, makeStyles} from '@material-ui/core'
import { Field, reduxForm } from 'redux-form'
import AddIcon from '@material-ui/icons/Add'
import { createMuiTheme } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";
this is where ive defined styles for some of the components
const useStyles = makeStyles((theme)=> ({
margin: {
margin:theme.spacing(1)
},
textField: {
width: '40ch',
}
}))
const BlueSwitch = withStyles({
switchBase: {
color: "#29b6f6",
'&$checked': {
color: "#29b6f6",
},
'&$checked + $track': {
backgroundColor: "#29b6f6",
},
},
checked: {},
track: {},
})(Switch);
const muiTheme = createMuiTheme({
overrides: {
MuiSlider: {
thumb: {
color: "#29b6f6"
},
track: {
color: "#29b6f6"
},
rail: {
color: "black"
}
}
}
});
styles ended
validate function, not able to determine whether its working or not
const validate = values => {
const errors = {}
const requiredFields = [ 'email', 'recoverymail', 'password', 'securityans' ]
requiredFields.forEach(field => {
if (!values[ field ]) {
errors[ field ] = 'Required'
}
})
if (values.email && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
errors.email = 'Invalid email address'
}
return errors
}
const Tasks = (props) => {
const { handleSubmit } = props
const classes = useStyles();
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
ive defined this particular state for the slider but thought just by calling the values like {runtime_min, runtime_max, sleeptime_min, sleeptime_max } in the value props of each of the sliders, but im not sure now nor i know any other way of defining its state
const [{runtime_min, runtime_max, sleeptime_min, sleeptime_max }, setValue] = React.useState(30);
const handleChange = (event, newValue) => {
setValue(newValue)
}
const [security, setState] = React.useState({
email: '',
recoverymail: '',
passowrd: '',
securityans:'',
runtime_min: '',
runtime_max: '',
sleeptime_min: '',
sleeptime_max: ''
});
const updateInfo = (event, inputValue ) => {
let inputField = event.target.name;
//let inputValue = event.target.value;
if( inputField === 'email'){
setState({ email: inputValue })
}
else if( inputField === 'recoverymail'){
setState({ email: inputValue })
}
else if( inputField === 'password'){
setState({ password: inputValue })
}
else if( inputField === 'securityans'){
setState({ securityans: inputValue })
}
else if( inputField === 'runtime_min'){
setState({ runtime_min: inputValue })
}
else if( inputField === 'runtime_max'){
setState({ runtime_max: inputValue })
}
else if( inputField === 'sleeptime_min'){
setState({ sleeptime_min: inputValue })
}
else if( inputField === 'sleeptime_max'){
setState({ sleeptime_max: inputValue })
}
}
on click of the create task button given below itll call this function and post all the given details
const create_task =(e)=>{
let{ email, recoverymail, passowrd, securityans, runtime_min, runtime_max, sleeptime_min, sleeptime_max } = this.state;
fetch('db_name', {
method: 'post',
headers: { 'Content=Type': 'application/json' },
body: JSON.stringify({
email : email,
recoverymail : recoverymail,
passowrd : passowrd,
securityans : securityans,
runtime_min : runtime_min,
runtime_max : runtime_max,
sleeptime_min : sleeptime_min,
sleeptime_max: sleeptime_max
})
}).then(response => response.json()).then(data => {
window.alert(data)
})
};
const [state, setStatei] = React.useState({
checkedA: true,
checkedB: true,
checkedC: true,
checkedD: true,
checkedE: true
});
const handleChangei = (event) => {
setStatei({ ...state, [event.target.name]: event.target.checked });
};
const renderTextField = ({ input, label, meta: { touched, error, invalid }, ...custom }) => (
<TextField hintText={label}
id="outlined-basic"
variant="outlined"
label={label}
placeholder={label}
error={touched && invalid}
helperText={touched && error}
input={security.state}
{...custom}
/>
)
return(
<Button className="b1" onClick={handleShow}>+ Create Task</Button>
<Container>
<Modal show={show} onHide={handleClose} className="modal-dialog modal-lg">
<Modal.Header className="modal-head" closeButton>
<Modal.Title> Create Task</Modal.Title>
</Modal.Header>
<Modal.Body className="modal-body" onSubmit={handleSubmit}>
<Row>
<Col>
<Field className={clsx(classes.margin, classes.textField)} component={renderTextField} placeholder="Email" onChange={updateInfo} name="email" value={security.email}/>
</Col>
<Col>
<Field className={clsx(classes.margin, classes.textField)} component={renderTextField} placeholder="Recovery Email" onChange={updateInfo} name="recoverymail" value={security.recoverymail}/>
</Col>
</Row>
<Row>
<Col>
<Field className={clsx(classes.margin, classes.textField)} component={renderTextField} placeholder="Password" onChange={updateInfo} name="passowrd" value={security.passowrd}/>
</Col>
<Col>
<Field className={clsx(classes.margin, classes.textField)} component={renderTextField} placeholder="Security Answer" onChange={updateInfo} name="securityans" value={security.securityans}/>
</Col>
</Row>
<>
<Container class="set-ci">
<Row>
<Col>
<text className="text-ci">Run Time</text> <b> Minimum</b>
<ThemeProvider theme={muiTheme}>
<Slider
value={runtime_min}
onChange={handleChange}
aria-labelledby="discrete-slider-always"
step={10}
valueLabelDisplay="auto"
/>
</ThemeProvider>
</Col>
<Col>
<text className="text-ci">Run Time </text> <b> Maximum</b>
<ThemeProvider theme={muiTheme}>
<Slider
value={runtime_max}
onChange={handleChange}
aria-labelledby="discrete-slider-always"
step={10}
valueLabelDisplay="auto"
/>
</ThemeProvider>
</Col>
</Row>
<Row>
<Col>
<text className="text-ci">Sleep Time </text> <b> Minimum</b>
<ThemeProvider theme={muiTheme}>
<Slider
value={sleeptime_min}
onChange={handleChange}
aria-labelledby="discrete-slider-always"
step={10}
valueLabelDisplay="auto"
/>
</ThemeProvider>
</Col>
<Col>
<text className="text-ci">Sleep Time </text> <b> Maximum</b>
<ThemeProvider theme={muiTheme}>
<Slider
value={sleeptime_max}
onChange={handleChange}
aria-labelledby="discrete-slider-always"
step={10}
valueLabelDisplay="auto"
/>
</ThemeProvider>
</Col>
</Row>
</Container>
</>
<Row className="foot-row">
<Col>
<Row>
<Col>
<FormControlLabel
className="set-fcl"
control=
{
<BlueSwitch
checked={state.checkedA}
onChange={handleChangei}
name="checkedA"
/>
}
label="Youtube"
/>
</Col>
<Col>
<FormControlLabel
className="set-fcl"
control=
{
<BlueSwitch
checked={state.checkedB}
onChange={handleChangei}
name="checkedB"
/>
}
label="Shopping"
/>
</Col>
</Row>
<Row>
<Col>
<FormControlLabel
className="set-fcl"
control=
{
<BlueSwitch
checked={state.checkedC}
onChange={handleChangei}
name="checkedC"
/>
}
label="Images"
/>
</Col>
<Col>
<FormControlLabel
className="set-fcl"
control=
{
<BlueSwitch
checked={state.checkedD}
onChange={handleChangei}
name="checkedD"
/>
}
label="Search"
/>
</Col>
</Row>
<Row>
<Col>
<Form>
<FormControlLabel
className="set-fcl"
control=
{
<BlueSwitch
checked={state.checkedE}
onChange={handleChangei}
name="checkedE"
/>
}
label="News"
/>
</Form>
</Col>
<Col className="generate-col">
<Button className="generate" onClick={create_task} type="submit" > <AddIcon/> Create Task </Button>
</Col>
</Row>
</Col>
</Row>
</Modal.Body>
</Modal>
</Container>
);
}
export default reduxForm({
form: 'simple',
validate
})(Tasks)
onclick of the create task button i get an error stating "TypeError: Cannot read property 'state' of undefined" which im not able to debug