Why is props undefined when using react-redux?

Question

I am new to React and have been trying to look at this code for a while and can't figure out what could be wrong. I am getting an error saying that props is undefined when I try to console.log this.props to the screen.

Here is the code:

import React, { useState } from 'react';
import Grid from '@material-ui/core/Grid';
import InputField from 'shared/components/form/Inputfield';
import DatePicker from 'shared/components/pickers/DatePicker';
import InfoButton from 'shared/components/buttons/InfoButton';
import CustomButton from 'shared/components/buttons/CustomButton';
import TextArea from 'shared/components/form/TextArea';
import { connect } from 'react-redux';

export function ProjectDetails() {
    const [values, setValues] = React.useState({
        full_project_name: ' ',
        short_name: ' ',
        associated_projects: ' ',
        short_description: ' ',
        summary: ' ',
        url_to_webpage: ' ',
        start_date: ' ',
        end_date: ' ',
    });

    const handleNameChange = full_project_name => event => {
        console.log('Props of this object', this.props);
        setValues({ ...values, [full_project_name]: event.target.value });
    };

    const handleShortNameChange = short_name => event => {
        setValues({ ...values, [short_name]: event.target.short_name });
    };

    console.log('Project values', { values });

    return (
        <>
            <h1>Project Details</h1>
            <Grid container spacing={1}>
                <Grid item xs={12}>
                    <h3>Full project name *</h3>
                </Grid>
                <Grid item xs={12}>
                    <InputField handler={handleNameChange('full_project_name')} />
                </Grid>
                <Grid item xs={12}>
                    <h3>Short name (Acronym)</h3>
                </Grid>
                <Grid item xs={12}>
                    <InputField handler={handleShortNameChange('short_name')} />
                </Grid>
                <Grid item xs={12}>
                    <h3>
                        Associated Projects <InfoButton />
                    </h3>
                </Grid>
                <Grid item xs={11}>
                    <InputField placeHolderText="Search Project" />
                </Grid>
                <Grid item xs={1}>
                    <CustomButton buttonType="Add" text="Add" />
                </Grid>
                <Grid item xs={12}>
                    <h3>
                        Short Description * <InfoButton />
                    </h3>
                </Grid>
                <Grid item xs={12}>
                    <TextArea maxChars={350} />
                </Grid>
                <Grid item xs={12}>
                    <h3>
                        Summary * <InfoButton />
                    </h3>
                </Grid>
                <Grid item xs={12}>
                    <TextArea maxChars={4000} />
                </Grid>
                <Grid item xs={12}>
                    <h3>URL to Web Page</h3>
                </Grid>
                <Grid item xs={12}>
                    <InputField />
                </Grid>
                <Grid item xs={6}>
                    <h3>Start date *</h3>
                </Grid>
                <Grid item xs={6}>
                    <h3>End date *</h3>
                </Grid>
                <Grid item xs={12}>
                    <h3>
                        <DatePicker />
                    </h3>
                </Grid>
            </Grid>
        </>
    );
}

function mapStateToProps(state) {
    console.log('The state when map happens is: ', state);
    return {
        full_project_name: state.projectReducer.full_project_name,
        short_name: state.projectReducer.short_name,
        associated_projects: state.projectReducer.associated_projects,
        short_description: state.projectReducer.short_description,
        summary: state.projectReducer.summary,
        url_to_webpage: state.projectReducer.url_to_webpage,
        start_date: state.projectReducer.start_date,
        end_date: state.projectReducer.end_date,
    };
}

export default connect(mapStateToProps)(ProjectDetails);

When the handleNameChange()-method is called props are undefined. I think I might be using connect wrong. Can anyone help me out?

Answer 1

In a functional component, you cannot access this

Try this instead:

export function ProjectDetails(props) {
    const handleNameChange = full_project_name => event => {
        console.log('Props of this object', props);
    }
}

We get access to props from arguments of the function. Have a read in react docs: https://reactjs.org/docs/components-and-props.html