Can't seem to pass prop from component to component. (React/Redux)

Question

I am having an issue where I am getting an undefined error every time I pass a prop from one component to another. I have two components where I am trying to pass a prop from the parent to the child component. My App component is executing a Redux action called getSession() to grab session data from our main application via api call to use in this react app. I am using componentDidMount function to do so.

import './App.css';
import React, {Component} from 'react';
import QuickClassifyHeader from './components/Header';
import StudentCourseTable from './components/StudentCourseTable';
import CourseSearch from './components/CourseSearch';
import CourseApproval from './components/CourseApproval';
import {BrowserRouter,Route, Switch} from "react-router-dom";
import { Layout, Drawer, Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { connect } from 'react-redux';
import { getSession } from './components/redux/actions/sessionActions';



const { Content } = Layout;

class App extends Component{
    
  state = {
      visible: false,
    }

    //initialize props when this component turns on
    // constructor(props){
    //   super(props);
    // }

    componentDidMount()
    {
      //call get session action
      this.props.getSession();
    }

    showDrawer = () => {
        this.setState({
            visible: true,
        });
    }

    onClose = () => {
        this.setState({
            visible: false,
        });
    }

    render()
    {

        const sessionCId = this.props.session["contactID"];
        console.log("CONTACT ID: " + sessionCId);
        return (
               
            
                
                  
                        
                        
                            
                              
                             
                            
                              
                            
                              
                              
                        
                        
                    }
                  />
                  
                    
               
          
        )
    }
}

const mapStateToProps = state => ({
    session: state.session.item
});

export default connect(mapStateToProps, { getSession })(App);

Once I get session, I passed the contactID recieved from that session state to my header component via 'contactID' props. With that contactID, I am calling another action called getCoursework() in the useEffect() of this component to pull in coursework of a particular student. The issue I am having is that when I pass the contactID as a props I am getting the contactID set as undefined.

import React, { useEffect } from "react";
import { Row, Col, Button, Input, Tag, Spin } from 'antd';
import { BrowserRouter, Link } from "react-router-dom";
import ReusableButton from './common/Button';
import eventBus from '../utils/eventBus';
import {Helmet} from "react-helmet";
import { UserOutlined } from '@ant-design/icons';
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { getCoursework } from './redux/actions/courseworkAction';






const QuickClassifyHeader = props => {

    //redux hooks to grab our coursework state and dispatch
    const coursework = useSelector(state => state.coursework.items);
    const dispatch = useDispatch();

    //contactID prop that was passed in from the App component
    const {contactID} = props;


    useEffect(() => {
        if(contactID != null)
        {
            //when component mounts on the screen
            dispatch(getCoursework(contactID));  
        }
        return() => {
            //when the component is unmounting...
            console.log("unmounting...")
        }
    }, []);

    let profile = new Object();
    profile = coursework['studentProfile'];
    console.log(JSON.stringify(profile));



  
    //TODO: Figure out what to do with these constants later
    const degree =  "";
    const program = "";
    const dob = "";
    const formerName = "";
    const name = "";
    const concentration = "";


    if(profile != null)
    {
        return ( 
            
                
                    QuickClassify - Main Screen
                    
                
                
                    
                    
                        }
                            size="middle"
                            placeholder="Search for a Contact ID..." 
                            // onKeyPress={handleKeyPress}
                            value={props.contactID} 
                            />
                    
                    
                        Proofing SR
                        
                                            
                    
                
                
                    
                    
                        Name {profile.firstName}
                        Degree {profile.svcProgramCode}
                        Concentration {profile.concentrationCode}
                        Program {profile.svcProgramCode}
                        DOB {profile.dob}
                        Former Names {profile.formerNames}
                    
                    
                                           
                        
                            
                                   
                            
                        
                       
                
                
            
         );
    }
    return ( 
        
            
                QuickClassify - Main Screen
                
            
            
                
                
                    }
                        size="middle"
                        placeholder="Search for a Contact ID..." 
                        // onKeyPress={handleKeyPress}
                        value={props.contactID} 
                        />
                
                
                    Proofing SR
                    
                                        
                
            
            
                
                
                    Name
                    Degree
                    Concentration
                    Program
                    DOB
                    Former Names
                
                
                                       
                    
                        
                               
                        
                    
                   
            
            
        
     );
}
 
export default QuickClassifyHeader;

user_16532250 · Answer

I believe your problem stands on your useEffect. You are testing a condition that depends on contactID, but as you said, contactID won't be available until the second render at least. So you will need to add it as a dependency to the useEffect hook so it detects when contactID prop has changed and retests the condition:

useEffect(() => {
        if(contactID !== undefined)
        {
            //when component mounts on the screen
            dispatch(getCoursework(contactID));  
        }
        return() => {
            //when the component is unmounting...
            console.log("unmounting...")
        }
    }, [contactID]);

Let me know if this works out for you, if not please comment on what needs to be improved, I will adjust my answer accordingly.

Can't seem to pass prop from component to component. (React/Redux)

1 Answers