Untitled

import React, {useState} from 'react';

import clsx from 'clsx';

import { makeStyles } from '@material-ui/core/styles';

import TextField from '@material-ui/core/TextField';

import FormControlLabel from '@material-ui/core/FormControlLabel';

import FormControl from '@material-ui/core/FormControl';

import Radio from '@material-ui/core/Radio';

import RadioGroup from '@material-ui/core/RadioGroup';

import "./NewCaseForm.css"

import {animated, useSpring} from "react-spring";

​

​

const useStyles = makeStyles({

    root: {

        display: 'flex',

        flexWrap: 'wrap',

        borderRadius:0,

    },

    icon: {

        width: 40,

        height: 40,

        backgroundColor: '#00000029',

    },

    checkedIcon: {

        backgroundColor: '#9b97a28f',

        backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',

    },

});

​

​

function StyledRadio(props) {

    const classes = useStyles();

    return (

        <Radio

            className={classes.root}

            disableRipple

            color="default"

            checkedIcon={<span className={clsx(classes.icon, classes.checkedIcon)} />}

            icon={<span className={classes.icon} />}

            {...props}

        />

    );

}

​

function handleChange(e, setAge) {

    setAge(e.target.value);

}

​

export default function Form(props) {

    const [age, setAge] = useState('');

    console.log(age);

    const classes = useStyles();

    return (

​

        <div className="formContainer">

            <div className="form">

                <div>

                    <animated.div className="formTitle" style={props}>

                        <h1>Reporting</h1>

                    </animated.div>

                    <animated.div className="About" style={props}>

                        <h3>About</h3>

                        <input type="text" placeholder="test" onChange={(e) => handleChange(e, setAge)}/>

                       {/* <TextField

                                   value={age}

                                   label="Age"

                                   id="margin-normal"

                                   defaultValue=""

                                   className={classes.textField}

                                   margin="normal"

                                   variant="filled"

                                   InputLabelProps={{

                                       style: {

                                           color: 'rgba(242, 242, 242, 0.25)'

                                       } }}

                        />*/}

                    </animated.div>

                    <animated.div className="genderAnim" style={props}>

                        <FormControl className="setGenderContainer" component="fieldset">

                            <RadioGroup className="setGenderBox" defaultValue="other" aria-label="gender"

                                        name="customized-radios">

                                <FormControlLabel style={{marginRight:50}} value="male" control={<StyledRadio/>} label="Male"/>

                                <FormControlLabel style={{marginRight:50}} value="female" control={<StyledRadio/>} label="Female"/>

                                <FormControlLabel style={{marginRight:50}} value="other"   control={<StyledRadio/>} label="Other"/>

                            </RadioGroup>

                        </FormControl>

                    </animated.div>

                    <animated.div className="statusAnim" style={props}>

                        <h3>Status</h3>

                        <FormControl className="setGenderContainer" component="fieldset">

                            <RadioGroup className="setGenderBox" defaultValue="Confirmed" aria-label="Status"

                                        name="customized-radios">

                                <FormControlLabel style={{marginRight:50}} value="Confirmed" control={<StyledRadio/>} label="Confirmed"/>

                                <FormControlLabel style={{marginRight:50}} value="Recovered" control={<StyledRadio/>} label="Recovered"/>

                                <FormControlLabel style={{marginRight:50}} value="Hospitalized" control={<StyledRadio/>} label="Hospitalized"/>

                                <FormControlLabel style={{marginRight:50}} value="Dead" control={<StyledRadio/>} label="Dead"/>

                            </RadioGroup>

                        </FormControl>

                    </animated.div>

                    <div className="placesWithTransport">

                        <div className="movementPlaces">

                            <animated.div style={props} className="depPlace">

                                <TextField

                                    label="Department Region"

                                    id="margin-none"

                                    className="movementInputs"

                                    variant="filled"

                                    style={{width:'100%'}}

                                    InputLabelProps={{

                                        style: {

                                            color: 'rgba(242, 242, 242, 0.25)'

                                        }

                                    }}

                                    background="red"

                                />

                                <TextField

                                    label="Department City"

                                    id="margin-none"

                                    className="movementInputs"

                                    variant="filled"

                                    style={{width:'100%'}}

                                    InputLabelProps={{

                                        style: {

                                            color: 'rgba(242, 242, 242, 0.25)'

                                        }

                                    }}

                                />

                            </animated.div>

                            <animated.div style={props} className="arrPlace">

                                <TextField

                                    style={{width:'100%'}}

                                    label="Arrival Region"

                                    id="margin-none"

                                    className="movementInputs"

                                    variant="filled"

                                    InputLabelProps={{

                                        style: {

                                            color: 'rgba(242, 242, 242, 0.25)'

                                        }

                                    }}

                                />

                                <TextField

                                    style={{width:'100%'}}

                                    label="Arrival City"

                                    id="margin-none"

                                    className="movementInputs"

                                    variant="filled"

                                    InputLabelProps={{

                                        style: {

                                            color: 'rgba(242, 242, 242, 0.25)'

                                        }

                                    }}

                                />

                            </animated.div>

                        </div>

                        <animated.div style={props} className="transportAnim">

                            <RadioGroup className="transport" defaultValue="Plane" aria-label="transport"

                                        name="customized-radios">

                                <FormControlLabel style={{marginRight:50}} value="Plane" control={<StyledRadio/>} label="Plane"/>

                                <FormControlLabel style={{marginRight:50}} value="Ship" control={<StyledRadio/>} label="Ship"/>

                                <FormControlLabel style={{marginRight: 50}} value="Train" control={<StyledRadio/>} label="Train"/>

                                <FormControlLabel style={{marginRight: 50}} value="Car" control={<StyledRadio/>} label="Car"/>

                            </RadioGroup>

                        </animated.div>

                    </div>

                </div>

                <animated.div style={props} className="submitBtnContainer">

                    <div className="submitBtn">Confirm</div>

                </animated.div>

            </div>

        </div>

    );

}