なぜ次のコンポーネントはレンダリングされませんか？

Question

私は以下のコードを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> 
 
    ); 
 
    }; 
 
};

それは完全に正常に動作する必要があります。わずかな変更だけで、react.jsのドキュメントとまったく同じマップ関数です。 （：引用なし<「カルーセル/>、そうのように）、それは空のタグを表示し、任意の洞察力

Answer 1

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

マッピングコールバックはありませんを持っている私は私のホーム・コンポーネントでそれを呼び出すときに、なぜ私は理解していません。？あなたはどの

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

または

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

のいずれかをしたい

を返しますliにkey小道具を含めることを忘れないでください。