Brace yourself, what are - () - these things called?

Do you really wan't to see a day in the life of a software engineer?

Bob: Hey, do you have a minute?

Steve: Sure!

/zoom ... 7 minutes later

Steve: Sorry I didn't see the notification!

Bob: No worries, so . .. eh yea, this isn't working.

const UserComponent = ({ name, age }) => {
  <li>
    {name}
  </li>;
};

const RenderUsers = ({ users }) => {
  <div>
    <ul>
      {users.map((user, index) => (
        <UserComponent key={index} name={user.name}  />
      ))}
    </ul>
  </div>;
};

.....

return (
    <div>
      <h1>User List</h1>
      <RenderUsers users={usersData} />
    </div>
  );

Steve: Did you try console log the value of users.

Bob: yea, but let's try again.

.....

Steve: Hmmmm ok, so its there, and what about in the map, maybe there are no individual users, I bet thats it!!

Bob: ohh yea, I gotcha .....

Bob: Nah, Let's just do this tomorrow.

Steve: yea, every thing looks ok to me, can't see why its not working

2 hours later ........

1 new notification

Steve: forgot to include a return in there...

const RenderUsers = ({ users }) => {
  return (
    <div>
      <ul>
        {users.map((user, index) => (
          <UserComponent key={index} name={user.name}  />
        ))}
      </ul>
    </div>
  );
};

Bob: quick call?

/zoom

Steve: yea we forgot the return statement, thats why it wasn't rendering anything.

Bob: yayy it works!

Steve: What is typescript complaining about?

Unexpected block statement surrounding arrow body; move the returned value immediately after the `=>`.eslintarrow-body-style

Steve: hmmm, we can fix all that later!

Bob: I definitely remember not writing a return statement in the past though.

Steve: Yea instead of what you did before , at the curly braces, you should put the other ones.

Bob: What here?

Steve: no, before that, no , get rid of return and then the braces

Bob: ohh sure,

Steve: yea, and the closing one at the end

...

Steve: yea, the closing one, .. on line 54

Bob: ohh yea,

Steve: put a like the round braces there instead

Bob: the which?

Steve: ahh i always forget what there called, the open and closed brackets under 9 and 0

Bob: the parenthesis?

Steve: yeah!! exactly

Bob: like this?

const RenderUsers = ({ users }) => (
  <div>
    <ul>
      {users.map((user, index) => (
        <UserComponent key={index} name={user.name} age={user.age} />
      ))}
    </ul>
  </div>
);

....

.....

Bob: so () instead of {}?

Steve: yea

Steve: like 10 years experience between us right?

Bob: something like that!