JS in JSX

To reference JS in JSX we must use { }

They can only be used to declare strings or objects

Passing strings

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar} // KEY EXAMPLE
      alt={description} // KEY EXAMPLE
    />
  );
}

Using Expressions

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1> // KEY EXAMPLE
  );
}

Passing Objects

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>