converting class to hooks 'props' is not defined no-undef`

Question

• I am trying to convert the class component into functional component.
• so I followed the below article and converted partially https://javascriptplayground.com/refactoring-to-react-hooks/
• but not sure how to convert the props
• I am facing an Error ./src/components/SportsExpansion.js Line 65: 'props' is not defined no-undef
• can you let me know how to fix it and do I need to make any other changes for react hooks

class component code

import React, { Fragment, useState, Component } from 'react';
import styles from './styles';
import { withStyles } from '@material-ui/core/styles';
import classnames from 'classnames';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import IconButton from '@material-ui/core/IconButton';
import Button from '@material-ui/core/Button';
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import Typography from '@material-ui/core/Typography';

import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';

import Checkbox from '@material-ui/core/Checkbox';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import dataStyles from '../../../../styles.css';

function TabContainer(props) {
    return (
        <Typography component="div" style={{ padding: 8 * 3 }}>
            {props.children}
        </Typography>
    );
}

const radioValues = [
    {
        label: 'Select All Providers for This Category',
        value: 'PRO',
    },
];

class SportsExpansion extends Component {
    state = {
        value: 0,
        spHeight: [],

        spLength: '',
    };

    componentDidMount() {
        this.setState({ spHeight: this.props.spHeight });

        if (
            this.props.spHeight.filter(
                check => check.spWeight === 'One'
            ).length > 0
        ) {
            this.setState({ value: 0 });
        } else if (
            this.props.spHeight.filter(
                check => check.spWeight === 'Two'
            ).length > 0
        ) {
            this.setState({ value: 1 });
        }
    }

    handleChange = (event, value) => {
        console.log('handleChange -value', value);

        this.setState({ value });
    };

    handleSportsRadioValueChange = (category, value) => {
        console.log('handleSportsRadioValueChange -category', category);

        console.log('handleSportsRadioValueChange -value', value);
        this.setState({ spLength: value });
    };

    render() {
        const { classes, data } = this.props;

        let udVal = '';
        let starVal = '';
        udVal = data.udVals ? data.udVals[0].number : '';
        starVal = data.starVals ? data.starVals[0].number : '';

        const { canEdit, value } = this.state;
        const { spHeight } = this.state;

        return (
            <div>
                <AppBar
                    className={classes.benchmarkTabHeader}
                    position="static"
                    color="default"
                >
                    <Tabs
                        onChange={this.handleChange}
                        variant="scrollable"
                        scrollButtons="on"
                        indicatorColor="primary"
                        textColor="primary"
                        style={{ display: 'block' }}
                        classes={{
                            indicator: classes.tabsIndicator,
                            scrollButtons: classes.MuiPrivateTabScrollButton,
                        }}
                    >
                        <Tab
                            style={{
                                display:
                                    this.state.spHeight.filter(
                                        check =>
                                            check.spWeight === 'One'
                                    ).length === 0
                                        ? 'none'
                                        : '',
                                color: value == 0 ? '#1976D2' : '#66696C',
                            }}
                            label={`Groups (${
                                this.state.spHeight.filter(
                                    check =>
                                        check.spWeight === 'One'
                                ).length
                            })`}
                            icon={
                                <FontAwesomeIcon style={{ display: 'block' }} />
                            }
                            classes={{
                                root: classes.tabRoot,
                                selected: classes.tabSelected,
                                wrapper: classes.alignment,
                            }}
                        />
                        <Tab
                            style={{
                                display:
                                    this.state.spHeight.filter(
                                        check =>
                                            check.spWeight ===
                                            'Two'
                                    ).length === 0
                                        ? 'none'
                                        : '',
                                color: value == 1 ? '#1976D2' : '#66696C',
                            }}
                            label={`Two (${
                                this.state.spHeight.filter(
                                    check =>
                                        check.spWeight ===
                                        'Two'
                                ).length
                            })`}
                            icon={
                                <FontAwesomeIcon style={{ display: 'block' }} />
                            }
                            classes={{
                                root: classes.tabRoot,
                                selected: classes.tabSelected,
                                wrapper: classes.alignment,
                            }}
                        />

                    </Tabs>
                </AppBar>
                {value === 0 && (
                    <TabContainer>
                        <div>
                            {' '}
                            <FormControl
                                component="fieldset"
                                className={classes.formControl}
                            >
                                <FormLabel component="legend" />
                                <RadioGroup
                                    aria-label="Gender"
                                    name="gender1"
                                    className={classes.one}
                                    value={this.state.spLength}
                                    onChange={e => {
                                        this.setState({
                                            spLength: e.target.value,
                                        });
                                    }}
                                >
                                    {this.state.spHeight
                                        .filter(
                                            check =>
                                                check.spWeight ===
                                                'One'
                                        )
                                        .map((radio, radioIndex) => {
                                            return (
                                                <FormControlLabel
                                                    key={radioIndex}
                                                    value={radio.value}
                                                    control={<Radio />}
                                                    label={radio.label}
                                                    classes={{
                                                        label:
                                                            classes.checkboxLabel,
                                                    }}
                                                />
                                            );
                                        })}
                                    )}
                                </RadioGroup>
                            </FormControl>
                            <div className="tiger-button-container">
                                <Button
                                    variant="outlined"
                                    color="primary"
                                    size="small"
                                    className="tiger-button-upload"
                                >
                                    ghsd jkjkjk
                                </Button>
                            </div>
                            <Drawer
                                style={{ width: 500 }}
                                anchor="right"
                                open={this.state.right}
                            >
                                <div tabIndex={0} role="button"></div>
                            </Drawer>
                        </div>
                    </TabContainer>
                )}
                {value === 1 && (
                    <TabContainer>
                        <div>
                            <div>
                                <FormControl
                                    component="fieldset"
                                    className={classes.formControl}
                                >
                                    <RadioGroup
                                        aria-label="Gender"
                                        name="gender1"
                                        className={classes.one}
                                        value={this.state.spLength}
                                        onChange={e => {
                                            this.setState({
                                                spLength:
                                                    e.target.value,
                                            });
                                        }}
                                    >
                                        {this.state.spHeight
                                            .filter(
                                                check =>
                                                    check.spWeight ===
                                                    'Two'
                                            )
                                            .map((radio, radioIndex) => {
                                                return (
                                                    <FormControlLabel
                                                        key={radioIndex}
                                                        value={radio.label}
                                                        control={<Radio />}
                                                        label={radio.label}
                                                        classes={{
                                                            label:
                                                                classes.checkboxLabel,
                                                        }}
                                                    />
                                                );
                                            })}
                                    </RadioGroup>
                                </FormControl>

                                <div className="tiger-button-container">
                                    <Button
                                        variant="outlined"
                                        color="primary"
                                        size="small"
                                        className="tiger-button-upload"
                                    >
                                        ghsd jkjkjk
                                    </Button>
                                </div>
                            </div>
                        </div>
                    </TabContainer>
                )}

            </div>
        );
    }
}

export default withStyles(styles)(SportsExpansion);

//////////////////////////////////////////////// functional component code

import React, { Fragment, useState, useEffect, Component } from 'react';
import styles from './styles';
import { withStyles } from '@material-ui/core/styles';
import classnames from 'classnames';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import IconButton from '@material-ui/core/IconButton';
import Button from '@material-ui/core/Button';
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import Typography from '@material-ui/core/Typography';

import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';

import Checkbox from '@material-ui/core/Checkbox';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import dataStyles from '../../../../styles.css';

function TabContainer(props) {
    return (
        <Typography component="div" style={{ padding: 8 * 3 }}>
            {props.children}
        </Typography>
    );
}

const radioValues = [
    {
        label: 'Select All Providers for This Category',
        value: 'PRO',
    },
];

//class SportsExpansion extends Component {
const SportsExpansion = () => {



    const [value, setValue] = useState(0);
    const [spHeight, setspHeight] = useState([]);
    const [spLength, setspLength] = useState('');


    // const { classes, data } = this.props;
    const { classes, data } = props;


    let udVal = '';
    let starVal = '';
    udVal = data.udVals ? data.udVals[0].number : '';
    starVal = data.starVals ? data.starVals[0].number : '';

    // const { canEdit, value } = this.state;
    // const { spHeight } = this.state;




    useEffect(() => {
        // code to run on component mount

        //this.setState({ spHeight: this.props.spHeight });
        setspHeight(setspHeight);

        if (
            setspHeight.filter(
                check => check.spWeight === 'One'
            ).length > 0
        ) {
            this.setState({ value: 0 });
        } else if (
            setspHeight.filter(
                check => check.spWeight === 'Two'
            ).length > 0
        ) {
            this.setState({ value: 1 });
        } 
    }, [])

    //handleChange = (event, value) => {
    const handleChange = (event, value) => {

        console.log('handleChange -value', value);

        this.setState({ value });
    };

    // handleSportsRadioValueChange = (category, value) => {
    const handleSportsRadioValueChange = (category, value) => {

        console.log('handleSportsRadioValueChange -category', category);

        console.log('handleSportsRadioValueChange -value', value);
        this.setState({ spLength: value });
    };

    return (
        <div>
            <AppBar
                className={classes.benchmarkTabHeader}
                position="static"
                color="default"
            >
                <Tabs
                    onChange={this.handleChange}
                    variant="scrollable"
                    scrollButtons="on"
                    indicatorColor="primary"
                    textColor="primary"
                    style={{ display: 'block' }}
                    classes={{
                        indicator: classes.tabsIndicator,
                        scrollButtons: classes.MuiPrivateTabScrollButton,
                    }}
                >
                    <Tab
                        style={{
                            display:
                            //this.state.spHeight.filter(
                            spHeight.filter(
                                check =>
                                    check.spWeight === 'One'
                            ).length === 0
                                ? 'none'
                                : '',
                            color: value == 0 ? '#1976D2' : '#66696C',
                        }}
                        label={`Groups (${
                            //this.state.spHeight.filter(
                            spHeight.filter(
                                check =>
                                    check.spWeight === 'One'
                            ).length
                            })`}
                        icon={
                            <FontAwesomeIcon style={{ display: 'block' }} />
                        }
                        classes={{
                            root: classes.tabRoot,
                            selected: classes.tabSelected,
                            wrapper: classes.alignment,
                        }}
                    />
                    <Tab
                        style={{
                            display:
                            //this.state.spHeight.filter(
                            spHeight.filter(
                                check =>
                                    check.spWeight ===
                                    'Two'
                            ).length === 0
                                ? 'none'
                                : '',
                            color: value == 1 ? '#1976D2' : '#66696C',
                        }}
                        label={`Two (${
                            //this.state.spHeight.filter(
                            spHeight.filter(
                                check =>
                                    check.spWeight ===
                                    'Two'
                            ).length
                            })`}
                        icon={
                            <FontAwesomeIcon style={{ display: 'block' }} />
                        }
                        classes={{
                            root: classes.tabRoot,
                            selected: classes.tabSelected,
                            wrapper: classes.alignment,
                        }}
                    />

                </Tabs>
            </AppBar>
            {value === 0 && (
                <TabContainer>
                    <div>
                        {' '}
                        <FormControl
                            component="fieldset"
                            className={classes.formControl}
                        >
                            <FormLabel component="legend" />
                            <RadioGroup
                                aria-label="Gender"
                                name="gender1"
                                className={classes.one}
                                value={//this.state.spLength
                                    spLength}
                                onChange={e => {
                                    this.setState({
                                        spLength: e.target.value,
                                    });
                                }}
                            >
                                {//this.state.spHeight
                                    spHeight
                                        .filter(
                                        check =>
                                            check.spWeight ===
                                            'One'
                                        )
                                        .map((radio, radioIndex) => {
                                            return (
                                                <FormControlLabel
                                                    key={radioIndex}
                                                    value={radio.value}
                                                    control={<Radio />}
                                                    label={radio.label}
                                                    classes={{
                                                        label:
                                                        classes.checkboxLabel,
                                                    }}
                                                />
                                            );
                                        })}
                                )}
                                </RadioGroup>
                        </FormControl>
                        <div className="tiger-button-container">
                            <Button
                                variant="outlined"
                                color="primary"
                                size="small"
                                className="tiger-button-upload"
                            >
                                ghsd jkjkjk
                                </Button>
                        </div>
                        {/*<Drawer
                            style={{ width: 500 }}
                            anchor="right"
                            open={

                                //this.state.right
                                right}
                        >
                            <div tabIndex={0} role="button"></div>
                        </Drawer>*/}
                    </div>
                </TabContainer>
            )}
            {value === 1 && (
                <TabContainer>
                    <div>
                        <div>
                            <FormControl
                                component="fieldset"
                                className={classes.formControl}
                            >
                                <RadioGroup
                                    aria-label="Gender"
                                    name="gender1"
                                    className={classes.one}
                                    value={//this.state.spLength
                                        spLength}
                                    onChange={e => {
                                        this.setState({
                                            spLength:
                                            e.target.value,
                                        });
                                    }}
                                >
                                    {//this.state.spHeight
                                        spHeight
                                            .filter(
                                            check =>
                                                check.spWeight ===
                                                'Two'
                                            )
                                            .map((radio, radioIndex) => {
                                                return (
                                                    <FormControlLabel
                                                        key={radioIndex}
                                                        value={radio.label}
                                                        control={<Radio />}
                                                        label={radio.label}
                                                        classes={{
                                                            label:
                                                            classes.checkboxLabel,
                                                        }}
                                                    />
                                                );
                                            })}
                                </RadioGroup>
                            </FormControl>

                            <div className="tiger-button-container">
                                <Button
                                    variant="outlined"
                                    color="primary"
                                    size="small"
                                    className="tiger-button-upload"
                                >
                                    ghsd jkjkjk
                                    </Button>
                            </div>
                        </div>
                    </div>
                </TabContainer>
            )}

        </div>
    );


}

export default withStyles(styles)(SportsExpansion);

Answer 1

你在const SportsExpansion = () => { ...中缺少props参数，应该是const SportsExpansion = (props) => { ... 。