YT98 YT98 - 9 months ago 29
React JSX Question

Why doesn't the following component render?

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 Source
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 lis.