Error when trying to .map over props in React-Redux when getting data from Firebase

Question

I've been trying to figure this out and I don't know what I am doing wrong. I have set up React-Redux to import/edit data from Firebase. I can get the data but can't seem to map over the database to use each database item. Each item will be an object with various data about a problem on the north country trail. It will have a name, location, description etc...

I can access the data from Firebase. I can console.log the array with the information of each trail object in it. I cannot get it to display on screen.

I either get this error: TypeError: Cannot read property 'map' of undefined or an error about Objects are not valid as a React child.

Below is some of my pertinent code:

action.js

 export const fetchTrailItems = () => async dispatch => {
  trailItemsRef.on("value", snapshot => {
    dispatch({
      type: FETCH_TRAILITEMS,
      payload: snapshot
    });
  });
};

reducer.js

  const snapshotToArray = snapshot => {
  let returnArr = [];

  snapshot.forEach(function(childSnapshot) {
    let item = childSnapshot.val();
    item.key = childSnapshot.key;

    returnArr.push(item);
  });

  return returnArr;
};

    const getTrailData = (state = [], action) => {
  switch (action.type) {
    case FETCH_TRAILITEMS:
      const newData = snapshotToArray(action.payload);
      console.log(newData);
      return { ...state, trailItems: newData };
    default:
      return state;
  }
};

    const rootReducer = combineReducers({
  form: formReducer,
  auth: authReducer,
  trailwork: trailworkReducer,
  trailData: getTrailData
});

export default rootReducer;

TrailWorkList.js

    import React from "react";
import TrailworkItem from "./TrailworkItem";
import { connect } from "react-redux";
import * as actions from "../actions";

class TrailworkList extends React.Component {
  componentDidMount() {
    this.props.fetchTrailItems();
  }

  renderTrailList = () => {
    console.log(this.props.trailData.trailItems);
    return this.props.trailData.trailItems.map(trailItem => {
      return (
        <p>{trailItem}</p>
        // <TrailworkItem trailItem={trailItem} key={this.props.trailItem.key} />
      );
    });
  };

  render() {
    return (
      <div className="ui relaxed divided list">
        Hi Im a list
        {this.renderTrailList()}
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    trailData: state.trailData
  };
};

export default connect(mapStateToProps, actions)(TrailworkList);

I can console.log(this.props.trailData.trailItems) and get this: enter image description here

But if I try to.map over it I just get an error and "undefined" and nothing appears in the console.log except "undefined". I think I included all the necessary code. If anyone can offer any help, I would greatly appreciate it.

Answer 1

Need to check if you have this.props.trailData first.

renderTrailList = () => {
  console.log(this.props.trailData.trailItems);
  if (this.props.trailData) {
    return this.props.trailData.trailItems.map(trailItem => {
      return ( <
        p > {
          trailItem
        } < /p>
        // <TrailworkItem trailItem={trailItem} key={this.props.trailItem.key} />
      );
    });
  } else {
    return <p > Loading < /p>
  }

};