Warum rendert die folgende Komponente nicht?

Question

Ich habe den folgenden Code leben unter Carousel.js.

import React from 'react'; 
 

 
export default class Carousel extends React.Component { 
 
    render() { 
 

 
    const estatesArray = [ 
 
     {name: "The Villa", url: "www.google.ca", type: "Villa"}, 
 
     {name: "The Apartment", url: "www.google.ca", type: "Apartment"} 
 
    ]; 
 

 
    const listItems = estatesArray.map((obj) => { 
 
     <li> {obj.name} + {obj.url} </li> 
 
    }); 
 

 
    return (
 
     <ul> 
 
      {listItems} 
 
     </ul> 
 
    ); 
 
    }; 
 
};

Es sollte perfekt funktionieren. Es ist die exakt gleiche Kartenfunktion wie in der react.js-Dokumentation mit nur geringfügigen Änderungen. Ich verstehe nicht, warum, wenn ich es auf meinem Hauptkomponente nennen (wie so: < „Carousel /> ohne Anführungszeichen). Es zeigt einen leeren Tag Keine Erkenntnisse

Answer 1

const listItems = estatesArray.map((obj) => { 
    <li> {obj.name} + {obj.url} </li> 
}); 

der Mapping Rückruf hat keine? Rückkehr

Sie entweder

const listItems = estatesArray.map((obj) => { 
    return <li> {obj.name} + {obj.url} </li> 
}); 

oder

const listItems = estatesArray.map((obj) => (
    <li> {obj.name} + {obj.url} </li> 
)); 

wollen jede Vergessen Sie nicht, eine key Requisite auf Ihre li s einzuschließen.