How to get rid of : Warning: Invalid value for prop `settaskstatus` on <span> tag

1
votes

I have created my own component , the following :

import React, { Component, Fragment } from 'react';
import Checkbox from '@material-ui/core/Checkbox';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';

function StyledCheckbox(props) {
    const classes = useStyles();
    let iconClassName;
    if (!props.status) {
        iconClassName = classes.undoneIcon;
    } else if (props.status == 1) {
        iconClassName = classes.inProgressIcon;
    } else if (props.status == 2) {
        iconClassName = classes.checkedIcon;
    } else if (props.status == 3) {
        iconClassName = "taskStatusCheckboxCANCELED";
    }
    return (
        <Checkbox
            className={classes.root + " checklistTaskStyledCheckbox"}
            checkedIcon={<span className={clsx(classes.icon, iconClassName)} />}
            color="default"
            icon={<span className={iconClassName} />}
            {...props}
            onChange={() => {
                props.settaskstatus(props.message)
            }}
        />
    );
}
export default StyledCheckbox;

So as shown above i need to pass the function settaskstatus called in the onChange eventListener. This used to be simple in react, here the previous shown component markup 

                     <StyledCheckbox
                        status={this.state.status2}
                        message={this.props.message}
                        settaskstatus={this.setTaskStatus}
                     />

But now i'm getting this error

backend.js:6 Warning: Invalid value for prop settaskstatus on tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see www.fb.me/react-attribute-behavior in span (created by ForwardRef(ButtonBase)) in ForwardRef(ButtonBase) (created by WithStyles(ForwardRef(ButtonBase)))

2
reactjsmaterial-ui

2 Answers

1
votes

I think the issue might be that you are passing { ...props } to <Checkbox /> and props at that point includes settaskstatus, which is a custom attribute.

Try removing it and then passing the { ...rest } down.

https://reactjs.org/warnings/unknown-prop.html

0
votes

Try destructuring props into a rest object and settaskstatus like so:

import React, { Component, Fragment } from 'react';
import Checkbox from '@material-ui/core/Checkbox';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';

function StyledCheckbox(props) {
    const classes = useStyles();
    let iconClassName;
    if (!props.status) {
        iconClassName = classes.undoneIcon;
    } else if (props.status == 1) {
        iconClassName = classes.inProgressIcon;
    } else if (props.status == 2) {
        iconClassName = classes.checkedIcon;
    } else if (props.status == 3) {
        iconClassName = "taskStatusCheckboxCANCELED";
    }
    // See here:
    const {settaskstatus, ...rest} = props;
    // End see here :) 
    return (
        <Checkbox
            className={classes.root + " checklistTaskStyledCheckbox"}
            checkedIcon={<span className={clsx(classes.icon, iconClassName)} />}
            color="default"
            icon={<span className={iconClassName} />}
            {...rest}
            onChange={() => {
                settaskstatus(props.message)
            }}
        />
    );
}
export default StyledCheckbox;