curly braces and rendering list items

Question

Why does React not render the list items if the arrow function objectListcontains curly braces ?

export default function StatelessList() {
  const objDev = [
    { id: 1, surename: "John", name: "Wayne" },
    { id: 2, surename: "Hansa", name: "Doo" },
  ];

  const objectList = objDev.map((obj) =>
   // {
 
    <StateLessListElement
      key={obj.id}
      value1={obj.surename}
      value2={obj.name}
    />
// {
  );

  return <div>{objectList}</div>;
}

list item comp

import React from 'react'

function SingleElement({value, isSelected, changeState}) {
    return (
        <li className={isSelected ? "selected" : null}  onClick={changeState}>
            {value}
        </li>
    )
}

export default SingleElement

Answer 1

If curly braces are added you should also add the return statement. (props) => returnValue is a short hand for

(props) => {
   return returnValue;
}