CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxreact-hooks
Niko Bellic
Niko Bellic

Reputation: 59

React Redux - TypeError: Cannot read property 'props' of undefined

I am migrating my code from Class-Based Components to Function-Based Components. My code runs fine in Class-Based Component, however when I modified the code to Function-Based Components, I am getting TypeError: Cannot read property 'props' of undefined. My Class-Based Component Code is as follows :

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { InputData } from '../store/action/action.js';

class FirstPage extends Component {

    constructor() {
        super();
        this.state = {
            inputState: ''
        }
    }


    getInputText() {
        var text = document.getElementById('inputText').value;
        this.setState({ inputState: text });
        this.props.inputData(text);
    }

    render() {
        const { inputState } = this.state;
        return (
            <div>
                <p>Type Something</p>
                <input id="inputText" type="text"></input>
                <button style={{ marginLeft: '10px' }} onClick={() =>
                                    this.getInputText()}>Submit</button>
                <p>You Wrote : {inputState}</p>
                <br /><br />
                <Link to="/second"><button>Go to Second Page</button></Link>
            </div>
        );
    }
}

function mapStateToProp(state) {
    return ({
        // Get data from store
    })
}

function mapDispatchToProp(dispatch) {
    return ({
        // Send data to store
        inputData: (data) => { dispatch(InputData(data)) }
    })
}

export default connect(mapStateToProp, mapDispatchToProp)(FirstPage);

My Function-Based Component Code is as follows :

import { useState } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { InputData } from '../store/action/action.js';

const FirstPage = () => {
    const [inputState, setInputState] = useState('');

    const getInputText = () => {
        var text = document.getElementById('inputText').value;
        setInputState(text);
        this.props.inputData(text);    // **** THE ERROR IS APPEARING BECAUSE OF THIS LINE ****
    }

    return (
        <div>
            <p>Type Something</p>
            <input id="inputText" type="text"></input>
            <button style={{ marginLeft: '10px' }} onClick={getInputText}>Submit</button>
            <p>You Wrote : {inputState}</p>
            <br /><br />
            <Link to="/second"><button>Go to Second Page</button></Link>
        </div>
    );
}

function mapStateToProp(state) {
    return ({
        // Get Data from Store
    })
}

function mapDispatchToProp(dispatch) {
    return ({
        // Send data to Store
        inputData: (data) => { dispatch(InputData(data)) }
    })
}

export default connect(mapStateToProp, mapDispatchToProp)(FirstPage);

Upvotes: 1

Views: 519

Answers (2)

User7007
User7007

Reputation: 361

In function components props is passed in as a parameter. Pass props as a parameter to component and when referencing props, use props. rather than this.props

import { useState } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { InputData } from '../store/action/action.js';

const FirstPage = props => {
    const [inputState, setInputState] = useState('');

    const getInputText = () => {
        var text = document.getElementById('inputText').value;
        setInputState(text);
        props.inputData(text);   
    }

    return (
        <div>
            <p>Type Something</p>
            <input id="inputText" type="text"></input>
            <button style={{ marginLeft: '10px' }} onClick={getInputText}>Submit</button>
            <p>You Wrote : {inputState}</p>
            <br /><br />
            <Link to="/second"><button>Go to Second Page</button></Link>
        </div>
    );
}

function mapStateToProp(state) {
    return ({
        // Get Data from Store
    })
}

function mapDispatchToProp(dispatch) {
    return ({
        // Send data to Store
        inputData: (data) => { dispatch(InputData(data)) }
    })
}

export default connect(mapStateToProp, mapDispatchToProp)(FirstPage);

Upvotes: 0

Hend El-Sahli
Hend El-Sahli

Reputation: 6742

There's no this in functional component

const FirstPage = ({ inputData }) => {
const [inputState, setInputState] = useState('');

const getInputText = () => {
    var text = document.getElementById('inputText').value;
    setInputState(text);
    inputData(text);  // <-- Look here
}

Upvotes: 2

Related Questions