useState in react hooks converting to functional component

Question

• I am trying to convert the setState into useState.
• so I followed the below article and converted partially https://medium.com/javascript-in-plain-english/state-management-with-react-hooks-no-redux-or-context-api-8b3035ceecf8- but not sure how to convert the props
• but its not rendering the values.
• so I debugged and put console inside useEffect.
• I am getting undefind at this line, am I using useState wrongly useEffect(() => { console.log("useEffect setspHeight--->", setspHeight);
• 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 = (props) => {



    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
                console.log("useEffect setspHeight--->", setspHeight);


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

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

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

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

        useState({ value });
    };

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

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

        console.log('handleSportsRadioValueChange -value', value);
        useState({ 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 => {
                                    useState({
                                        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 => {
                                        useState({
                                            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

You have to replace where you call useState({ value: 1 }); to setValue(value)

Answer 2

You are using useState wrong. useState replaces the state object. The first value in the array is the value you can call in your component. The second value in the array replaces this.setState and sets the value of the state instance. So to use the useState hook if you had the following:

const [value, setValue] = useState(0);

you would use value in your component to reference this state instance. And you would use setValue to set the value of this state instance. So to set value to 2 you would do setValue(2).