React Redux TypeError: Cannot read property 'title' of undefined

Question

I cant access my redux state for a title={groupDetails.group.data.title} in the component below, But I have no problem console.log(groupDetails.group.data.title) in a button and getting the correct response.

Why is the title undefined when trying to have it run on first render? I was thinking it must be an issue with the useEffect.

Any help is much appreciated

import React, { createRef, useEffect, Fragment, useState } from 'react';
import {
  Button,
  Card,
  CardBody,
  Col,
  CustomInput,
  DropdownItem,
  DropdownMenu,
  DropdownToggle,
  Form,
  Input,
  InputGroup,
  Label,
  Media,
  Modal,
  ModalBody,
  ModalHeader,
  Row,
  UncontrolledDropdown
} from 'reactstrap';
import FalconCardHeader from '../common/FalconCardHeader';
import ButtonIcon from '../common/ButtonIcon';
import paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';
import BootstrapTable from 'react-bootstrap-table-next';
import { FontAwesomeIcon , faSms} from '@fortawesome/react-fontawesome';
import { useSelector, useDispatch } from 'react-redux';
import { Link } from 'react-router-dom';
import Flex from '../common/Flex';
import Avatar from '../common/Avatar';
import { getPaginationArray } from '../../helpers/utils';
import SingleOrList from './SingleOrList';
import { listGroups, createGroup, deleteGroup, groupById } from '../../actions/index';

const GroupEdit = ({match}) => {

const GroupId = match.params.id

  let table = createRef();

  const [showGroupModal, setShowGroupModal] = useState(false);
  const [showContactModal, setShowContactModal ] = useState(false);
  const [isSelected, setIsSelected] = useState(false);

  const dispatch = useDispatch();

  const groupDetails = useSelector((state) => state.groupDetails)
  const { success: successGet } = groupDetails

  const [group, setGroup] = useState({
    title: ''
  })


  useEffect(() => {
    dispatch(groupById(GroupId))
   
  }, [successGet])

  return (
    <Card className="mb-3">
      <FalconCardHeader title={groupDetails.group.data.title} <-- this is undefined
         light={false}>
        {isSelected ? (
          <InputGroup size="sm" className="input-group input-group-sm">
            <CustomInput type="select" id="bulk-select">
              <option>Bulk actions</option>
              <option value="Delete">Delete</option>
              <option value="Archive">Archive</option>
            </CustomInput>
            <Button color="falcon-default" size="sm" className="ml-2">
              Apply
            </Button>
          </InputGroup>
        ) : (
          <Fragment>
              <ButtonIcon icon="plus" onClick={() => { console.log(groupDetails.group.data.title)}} <--- this is working fine>
              Add Contacts
            </ButtonIcon>
          </Fragment>
        )}
      </FalconCardHeader>
      <CardBody className="p-0">
        <PaginationProvider pagination={paginationFactory(options)}>
          {({ paginationProps, paginationTableProps }) => {
            const lastIndex = paginationProps.page * paginationProps.sizePerPage;
            return (
              <Fragment>
                <div className="table-responsive">
                  <BootstrapTable
                    ref={table}
                    bootstrap4
                    keyField="_id"
                    data={groupDetails}
                    columns={columns}
                    selectRow={selectRow(onSelect)}
                    bordered={false}
                    classes="table-dashboard table-striped table-sm fs--1 border-bottom border-200 mb-0 table-dashboard-th-nowrap"
                    rowClasses="btn-reveal-trigger border-top border-200"
                    headerClasses="bg-200 text-900 border-y border-200"
                    {...paginationTableProps}
                  />
                </div>
                <Row noGutters className="px-1 py-3 flex-center">
                <Col className="pl-3 fs--1">
                <CustomTotal {...paginationProps} lastIndex={lastIndex} />
              
              </Col>

                  <Col xs="auto">
                    <Button
                      color="falcon-default"
                      size="sm"
                      onClick={handlePrevPage(paginationProps)}
                      disabled={paginationProps.page === 1}
                    >
                      <FontAwesomeIcon icon="chevron-left" />
                    </Button>
                    {getPaginationArray(paginationProps.totalSize, paginationProps.sizePerPage).map(pageNo => (
                      <Button
                        color={paginationProps.page === pageNo ? 'falcon-primary' : 'falcon-default'}
                        size="sm"
                        className="ml-2"
                        onClick={() => paginationProps.onPageChange(pageNo)}
                        key={pageNo}
                      >
                        {pageNo}
                      </Button>
                    ))}
                    <Button
                      color="falcon-default"
                      size="sm"
                      className="ml-2"
                      onClick={handleNextPage(paginationProps)}
                      disabled={lastIndex >= paginationProps.totalSize}
                    >
                      <FontAwesomeIcon icon="chevron-right" />
                    </Button>
                  </Col>
                </Row>
              </Fragment>
            );
          }}
        </PaginationProvider>
      </CardBody>
    </Card>
  );
};

export default GroupEdit;

Answer 1

This could happen because that data comes after the DOM loads, so when tries to retrieve that information it can't, what you can do is use the nullable like title={groupDetails?.group?.data?.title} so it will show the title only when the data comes