Why doesn't the following component render?

Question

I have the following code living under 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> ); }; }; 

It should work perfectly fine. It is the exact same map function as in the react.js documentation with only minor changes. I don't understand why when I call it on my Home component (like so: <"Carousel />, without the quote), it displays an empty tag. Any insights?

Answer 1

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

the mapping callback has no return

you want either

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

or

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

any don't forget to include a key prop on your li s.