I'm working on a React + TypeScript huge application. I'm building new component feature. It's a button that opens a modal with some filter options. I have included <i>
tag for an SVG Icon from here .
When I peek problem
using my Visual Studio, I get this error message:
Type '{ children: string; class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.ts(2322)
How can I fix this? I'm pretty new to React, TypeScript & the project itself. The <i>
tags are in the toggleArrow()
function
FilterOptions Component:
import './FilterOptions.scss';
import Button from '@material-ui/core/Button';
import Modal from '@material-ui/core/Modal';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import PropTypes, { any } from 'prop-types';
import * as React from 'react';
import FilterCheckboxes from '../FilterCheckboxes/FilterCheckboxes';
import FilterSliders from '../FilterSliders/FilterSliders';
const getModalStyle = (): any => {
const top = 50;
const left = 50;
return {
top: `${top}%`,
left: `${left}%`,
transform: `translate(-${top}%, -${left}%)`,
};
};
const styles = (theme): any => ({
paper: {
position: 'absolute',
width: theme.spacing.unit * 70,
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[5],
padding: theme.spacing.unit * 4,
outline: 'none',
spacing: theme.spacing,
},
buttonMargin: {
marginRight: '20px',
},
});
class FilterOptions extends React.Component {
public static propTypes: { classes: PropTypes.Validator<object>; };
public state = {
open: false,
};
public handleOpen = (): void => {
this.setState({ open: true });
};
public handleClose = (): void => {
this.setState({ open: false });
};
// function to toggle arrow
public toggleArrow = (): any => {
return this.state.open ? (
<i class='material-icons'>keyboard_arrow_down</i>
) : (
<i class='material-icons'>keyboard_arrow_right</i>
);
};
public render() {
const { classes }: any = this.props;
return (
<React.Fragment>
<Button
className={`filters__button ${classes.buttonMargin}`}
color='primary'
onClick={this.handleOpen}
>
<i class='material-icons'>
<span>filter_list</span>
</i>
<span className='filters__button-message'>Filters</span>
{this.toggleArrow()}
</Button>
<Modal
aria-labelledby='simple-modal-title'
aria-describedby='simple-modal-description'
open={this.state.open}
>
<div style={getModalStyle()} className={classes.paper}>
<Typography variant='h6' id='modal-title'>
Text in a modal
</Typography>
<Typography variant='subheading'>
Status
</Typography>
<FilterCheckboxes />
<Typography>Submitted</Typography>
<FilterSliders />
<Typography>Not Submitted</Typography>
<FilterSliders />
<Typography>MARQ</Typography>
<FilterSliders />
<Button onClick={this.handleClose}>Close</Button>
</div>
</Modal>
</React.Fragment>
);
}
}
FilterOptions.propTypes = {
classes: PropTypes.object.isRequired,
};
// We need an intermediary variable for handling the recursive nesting.
const SimpleModalWrapped = withStyles(styles)(FilterOptions);
export default SimpleModalWrapped;
You've typed it as an html element, which means you can only assign properties that are in that interface. It should be className
, not class
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.