getting error on conditional rendering with stateless component

Question

When I check the length of item, and trying to add in to template, getting error. any one help me to fix this issue?

here is my code :

import React from "react";
import "./style-posts.css";
import { connect } from "react-redux";
import { setTitle, titleHandler } from "../actions/postActions";

const ShowPosts = props => {
  if (props.posts.length) {
    const postItems = props.posts.map(post => {
      <div key={post.id}>
        <h3>{post.title}</h3>
        <p>{post.body}</p>
      </div>;
    });
  }

  return (
    <div>
      {props.posts.length ? postItems : null} //postItems is not defined
      <button onClick={props.showPosts}>Show Posts On Click </button>
    </div>
  );
};

export default connect(
  setTitle,
  titleHandler
)(ShowPosts);

getting error as postItems is not defined - what is wrong with me code? any one figure out?

Mayank Shukla · Answer 1 · 2018-08-16T07:28:35.587

1

Its because postItems is a const and you defined postItems variable inside if block, so it will be available in that block only. (let and const have block scope and var has function level scope).

Write it like this:

let postItems = null;

if (props.posts.length) {
    postItems = props.posts.map(post => (
        <div key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.body}</p>
        </div>;
    ));
}

Or use var instead of const.

if (props.posts.length) {
    var postItems = props.posts.map(post => (
        <div key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.body}</p>
        </div>;
    ));
}

I will suggest to check this answer for difference between let, var and const:

What's the difference between using "let" and "var" to declare a variable in JavaScript?

edited Aug 16 '18 at 07:28

answered Aug 16 '18 at 07:22

Mayank Shukla

100,735
18
158
142

will it work with `const` I think `let` should be there – Revansiddh Aug 16 '18 at 07:24
@Revansiddh my mistake, updated the answer thanks :) – Mayank Shukla Aug 16 '18 at 07:25
because you are not returning anything from map callback method. check the updated answer. – Mayank Shukla Aug 16 '18 at 07:29

score 0 · Answer 2 · answered Aug 18 '18 at 09:26

It can be const:

const postItems = !props.posts.length ? []
  : props.posts.map(post => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.body}</p>
    </div>;
  ));

No rendered data because no mapStateToProps, no proper mapDispatchToProps, simply bad redux connect usage.

getting error on conditional rendering with stateless component

2 Answers2