galki/material-ui-form

Warning: React does not recognize the `helperText` prop on a DOM element.

Closed this issue · 7 comments

Slavenin commented 
import React from 'react';
import InputLabel from '@material-ui/core/InputLabel';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
import FormControl from '@material-ui/core/FormControl';
import MaterialUIForm from 'material-ui-form'
import { withStyles } from '@material-ui/core/styles';
import Checkbox from "@material-ui/core/es/Checkbox/Checkbox";

const styles = theme => ({
    form: {
        display: 'flex',
        flexDirection: 'row',
        textAlign: 'center',
        alignItems: 'center',
        justifyContent: 'center',
    },
    btn: {
        display: 'flex',
        marginTop: theme.spacing.unit * 2,
        marginLeft: '32px'
    }
});

class OrganizationForm extends React.Component {

    render() {
        let { classes, onSubmit, error, user: organization, empty,  mode, orgList, typeOwn } = this.props;

        if(!typeOwn)
        {
            return null;
        }

        if(!empty && !organization)
        {
            return null;
        }
        else if(empty)
        {
            organization = {};
        }

        const fullDisable = mode === 'view';

        return (
            <div className={classes.form} >
                <MaterialUIForm error={error || null} onSubmit={onSubmit}>
                    {error ? <small className="error">{error}</small> :  null}
                    <TextField
                        label="Название компании"
                        type="text"
                        name="title"
                        value={organization.title || ""}
                        autoComplete={'title'}
                        data-validators="isRequired"
                        style={{ display: 'flex' }}
                        disabled={fullDisable}
                    />

                    <Checkbox
                        checked={organization.isActive}
                        name="isActive"
                        value=""
                        disabled={fullDisable}
                    />
                    <span>Состояние компании</span>

                    <Checkbox
                        checked={organization.bankAccountStatus}
                        name="bankAccountStatus"
                        value=""
                        disabled={fullDisable}
                    />
                    <span>Состояние счета</span>

                    <FormControl>
                        <InputLabel>Связанные компании</InputLabel>
                        <Select
                            multiple
                            required
                            value={organization.relatedOrganizations ? organization.relatedOrganizations.map((o) => o.id) : []}
                            style={{ display: 'flex' }}
                            inputProps={{
                                name: 'relatedOrganizations',
                                id: 'relatedOrganizationsid',
                            }}
                            name='relatedOrganizations[]'
                            disabled={fullDisable}
                        >
                            {orgList.map((o) => <MenuItem key={o.id} value={o.id}>{o.title}</MenuItem>)}
                        </Select>
                    </FormControl>

                    {fullDisable ? null : (
                        <Button
                            variant="raised"
                            size="large"
                            color="primary"
                            className={classes.btn}
                            type="submit">{mode === 'edit' ? 'Обновить' : 'Создать'}</Button>
                    )}

                </MaterialUIForm>
            </div>

        );
    }
}

export default withStyles(styles)(OrganizationForm);

Hi! In this from i have two errors:

Warning: React does not recognize the helperText prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase helpertext instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in div (created by Input)
in Input (created by WithStyles(Input))
in WithStyles(Input)
in Select (created by WithStyles(Select))
in WithStyles(Select) (created by OrganizationForm)
in FieldClone (created by Form)
in div (created by FormControl)
in FormControl (created by WithStyles(FormControl))
in WithStyles(FormControl) (created by OrganizationForm)
in form (created by Form)
in Form (created by OrganizationForm)
in div (created by OrganizationForm)
in OrganizationForm (created by WithStyles(OrganizationForm))
in WithStyles(OrganizationForm) (created by OrganizationsEdit)
in OrganizationsEdit (created by WithStyles(OrganizationsEdit))
in WithStyles(OrganizationsEdit) (created by component)
in component (created by Route)
in Route (created by Context.Consumer)
in Switch (created by Context.Consumer)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (created by Context.Consumer)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (created by Context.Consumer)
in div (created by Layout)
in Layout (created by WithStyles(Layout))
in WithStyles(Layout) (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in ContextProvider (created by App)
in MuiThemeProvider (created by App)
in App

and

Warning: Received false for a non-boolean attribute error.

If you want to write it to the DOM, pass a string instead: error="false" or error={value.toString()}.

If you used to conditionally omit it with error={condition && value}, pass error={condition ? value : undefined} instead.
in span (created by ButtonBase)
in ButtonBase (created by WithStyles(ButtonBase))
in WithStyles(ButtonBase) (created by IconButton)
in IconButton (created by WithStyles(IconButton))
in WithStyles(IconButton) (created by SwitchBase)
in SwitchBase (created by WithStyles(SwitchBase))
in WithStyles(SwitchBase) (created by Checkbox)
in Checkbox (created by WithStyles(Checkbox))
in WithStyles(Checkbox) (created by OrganizationForm)
in FieldClone (created by Form)
in form (created by Form)
in Form (created by OrganizationForm)
in div (created by OrganizationForm)
in OrganizationForm (created by WithStyles(OrganizationForm))
in WithStyles(OrganizationForm) (created by OrganizationsEdit)
in OrganizationsEdit (created by WithStyles(OrganizationsEdit))
in WithStyles(OrganizationsEdit) (created by component)
in component (created by Route)
in Route (created by Context.Consumer)
in Switch (created by Context.Consumer)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (created by Context.Consumer)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (created by Context.Consumer)
in div (created by Layout)
in Layout (created by WithStyles(Layout))
in WithStyles(Layout) (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in ContextProvider (created by App)
in MuiThemeProvider (created by App)
in App

and i can not understand what this errors???
Please help me! It's very urgent

{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.20.0",
        "babel-preset-react": "^6.24.1",
        "prop-types": "^15.6.1",
        "react": "^16.5.2",
        "react-dom": "^16.5.2",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server --port 9001",
        "dev": "encore dev",
        "watch": "encore dev --watch ",
        "build": "encore production"
    },
    "dependencies": {
        "@material-ui/core": "^1.4.1",
        "@material-ui/icons": "^2.0.0",
        "axios": "^0.18.0",
        "babel-preset-stage-0": "^6.24.1",
        "lodash": "^4.17.11",
        "material-ui": "^0.20.2",
        "material-ui-form": "^1.0.0-alpha.26",
        "moment": "^2.22.2",
        "react-router": "^4.3.1",
        "react-router-dom": "^4.3.1"
    }
}
galki commented

if you remove all the <FormControl>...</FormControl> code do you get the errors? if you stop getting the errors, try using the <TextField [select] /> instead.

Slavenin commented

Yes, error exists.
I am do like this:

const Orgs = () => (
            <FormControl className={classes.purchaseFormItem}>
                <InputLabel>Организация</InputLabel>
                <Select
                    required
                    multiple
                    value={subm.selOrg}
                    style={{ display: 'flex' }}
                    inputProps={{
                        name: 'organization[]',
                        id: 'organizationid',
                    }}
                    onChange={this.handleChange('selOrg')}
                    name='organization[]'
                    disabled={fullDisable}
                >
                    {orgList.map((o) => <MenuItem key={o.id} value={o.id}>{o.title}</MenuItem>)}
                </Select>
            </FormControl>
        );

but in this case library can not find select in this function and i create custom handler for this with save value in state. It dark way, but it work...

galki commented

it looks like some element with name and value props is causing the helperText and error warnings. please try to take out these elements one by one to see which is causing the warnings.

Slavenin commented

If i remove all checkbox and selects - form work correctly, but if add at least one checbox i see error about "error" attribute, if select - about "helperText"

galki commented

can you try using the FormControlLabel for the checkboxes?

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

<FormControlLabel
  control={<Checkbox checked={organization.isActive} name="isActive" value="" />}
  label="Состояние компании"
/>

for the select, did you try using <TextField select />?

Slavenin commented

This work. But why i can not use Select and Checkbox components?

galki commented

they used to work while this repo was active (as you can see from running the examples so im guessing they broke with material-ui updates