为什么反应不条件渲染

Question

So i have an issue while trying to render this list, item.cars, item.yachts and item.villas are numbers, what could be the reason for this not showing absolutely anything?

const renderItems = (locations) => {
<div className={styles.list}>
  {locations.map((item) => {
    if (item.cars != 0 || item.yachts != 0 || item.villas != 0)
      return (
        <DestinationItem
          id={item.id}
          image={Image[item.id]}
          name={item.name}
          subtitle={item.description}
          description={DESTINATIONS_DESCRIPTION[item.id]}
        />
      );
    return null;
  })}
</div>;
};

this is an item in locations object

cars: 0
description: "(Miami, Palm Beach, Broward)"
id: 3
name: "South Florida"
photo: "http://l.amazonaws.com/areaphotos/Audi_R8_a.jpg"
villas: 69
yachts: 53
__proto__: Object

this is the whole component code:

const Destinations = locations => {
 const renderItems = (locations) => {
  <div className={styles.list}>
  {locations.map(
    (item) =>
      (item.cars != 0 || item.yachts != 0 || item.villas != 0) && (
        <DestinationItem
          id={item.id}
          key={item.id}
          image={Image[item.id]}
          name={item.name}
          subtitle={item.description}
          description={DESTINATIONS_DESCRIPTION[item.id]}
        />
      )
  )}
</div>;

console.log(locations, 'data');
return (
  <div className={styles.mainContainer}>
    <div className={styles.title}>
      <h1>Pick Your Destination</h1>
        </div>
        {renderItems(locations)}
      </div>
    );
  };
};

export default Destinations;

Answer 1

Ok, so I'm not fully sure, but I try not to use if statements in the DOM. Try this style of conditional instead:

    <div className={styles.list}>
  {locations.map((item) => 
        (item.cars != 0 || item.yachts != 0 || item.villas != 0) && (
            <DestinationItem
              id={item.id}
              key={item.id}
              image={Image[item.id]}
              name={item.name}
              subtitle={item.description}
              description={DESTINATIONS_DESCRIPTION[item.id]}
            />)
  })
</div>;

The && operator acts as your if statement. And this way, you don't even need to include {} s in your map function. Also, don't forget to add a unique key to any mapped elements!

Answer 2

The Destinations component takes locations as a prop, correct? In that case, you'll want to either destructure the props object, like this:

const Destinations = ({ locations }) => {

or this

const Destinations = props => {
  const { locations } = props

or just use the props object and access the fields separately:

const Destinations = props => {
  // ...
  return (
    // ...
    {renderItems(props.locations)}
    // ...
  )
}

Additionally, the renderItems function has curly braces around it, so you need to use return to return a value from it. It's currently returning undefined , as there is no return .

const renderItems = (locations) => {
  return (
    <div className={styles.list}>
      {locations.map((item) => {
        if (item.cars !== 0 || item.yachts !== 0 || item.villas !== 0)
          return (
            <DestinationItem
              id={item.id}
              image={Image[item.id]}
              name={item.name}
              subtitle={item.description}
              description={DESTINATIONS_DESCRIPTION[item.id]}
            />
          );
        return null;
      })}
    </div>
  );
};

Or you can use the concise form of an arrow function, and replace the curly braces with parentheses:

const renderItems = (locations) => (
  <div className={styles.list}>
    {locations.map((item) => {
      if (item.cars !== 0 || item.yachts !== 0 || item.villas !== 0)
        return (
          <DestinationItem
            id={item.id}
            image={Image[item.id]}
            name={item.name}
            subtitle={item.description}
            description={DESTINATIONS_DESCRIPTION[item.id]}
          />
        );
      return null;
    })}
  </div>
);

As a side-note, you'll almost always want to use strict equality operators ( === and !== ) instead of abstract equality operators ( == and != ). The latter one has its share of pitfalls , eg '1' == 1 is true, as unexpected things like [[]] == 0 !