Ytukyg

Kindly go over the code below, if its not clear enough, Here is a codesandbox for an extended version of my issue,

so I am passing some properties from a parent to a child comp., the parent is my <Main /> comp., which is wrapped in a <Provider> comp. to allow it to access the store. Now, in the child, I have a function that renders info based on the passed props from the parent, here is my child comp. code

//Home Component

...

const RenderCard = ({item, isLoading, errMess}) => {

  console.log(item.name)

  

  if(isLoading) {

    return(

      <Loading /> 

      )

  } 

  else if (errMess) {

    return (

      <h4>{errMess}</h4>

      )

  }

  else {

    return(

      <h1>{item.name}</h1>

    ) 

  }

}



const Home = props => {

  return (

   <RenderCard item={props.dish} isLoading={props.dishesLoading} errMess={props.dishesErrMess} />

 )

}

  

...

  

Here is how I pass the prop from the parent,

const mapStateToProps = state => {

  return {

    dishes: state.dishes,

    comments: state.comments,

    leaders: state.leaders,

    promotions: state.promotions

  }

}



const mapDispatchToProps = dispatch => ({

  addComment: (dishId, rating, author, comment) => dispatch(addComment(dishId, rating, author, comment)),

  fetchDishes: () => {

    dispatch(fetchDishes())

  }

})



class Main extends Component {

  constructor(props) {

    super(props)

  }



  componentDidMount() {

    this.props.fetchDishes()

    console.log(this.props.dishes.dishes.filter(dish => dish.featured)[0])

  }



  render() {

    const HomePage = () => { 

      <Home dish = {this.props.dishes.dishes.filter(dish => dish.featured)[0]} /> 

  }

}

}



export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Main));

the strange part is, in the first code snippet, line 4, the console.log(..) msg, successfully logs the desired info to the console, which means the props are passed and reached to the <RenderCard /> comp. However, instead of rendering it on the window, I get a TypeError Cannot read property name of undefined.

please leave a comment below if any further parts of the code are needed.

thanks in advance.

PRoblem is that in your main component you are passing the dishesLoading prop to the Home component incorrectly. You need to access it from props with the name isLoading and not dishesLoading

const HomePage = () => {

      return (

        <Home

          dish={this.props.dishes.dishes.filter(dish => dish.featured)[0]}

          dishesLoading={this.props.dishes.isLoading}

          dishesErrMess={this.props.dishes.errMess}

        />

      );

};

Working sandbox

Also in the RenderCard component you shouldn't access item.name before the data is loaded since initially its undefined in console.log(item.name)

Problem is, that you're not returning any component in your Main component's render method. You've declared a method HomePage instead.

Refer the code below. This should work.

UPDATE:

Here's the sandbox that works: https://codesandbox.io/s/8nopnq3jo0

You were trying to render before the dishes loaded. Hence, added a condition check if the dishes were loaded or not.

function Home(props) {

  return (

    !props.dishesLoading && (

      <div className="container">

        <div className="row align-items-start">

          <div className="col-12 col-md m-1">

            <RenderCard

              item={props.dish}

              isLoading={props.dishesLoading}

              errMess={props.dishesErrMess}

            />

          </div>

        </div>

      </div>

    )

  );

}