0

This isn't as much of a problem I'm having, I'm just trying to clarify why my code works. As is clear, brackets allows me to embed Javascript into the return statement. However, does the parenthesis in my map method 'return' me to JSX and allow me to render components and add other JSX elements? Like I said, this works, I just want to be sure I have a firm understanding of why it works since my Google attempts to confirm my suspicions haven't proven useful

export const TileList = ({tiles}) => {
  return (
    <div>
       {tiles.map((tile, index) => (
       <Tile tile={tile} key={index}/>
      ))
      }
    </div>
  );
};

This is for a simple little React site that creates a 'tile' for every Contact information the user inputs. The code allows me to map through the array of contacts and create a tile for each input. Here's the subsequent component (that also works):

export const Tile = ({tile}) => {

  let tiles = Object.values(tile)

  return (
    <div className="tile-container">
      {tiles.map((tile, index) => (
      <p key={index}
      className={index === 0 ? 'tile-title' : 'tile'}
      >{tile}</p>
      ))}
    </div>
  );
};
bandito24
  • 3
  • 2
  • No, you don't need the parentheses. Those are used when the expression is multiline. – ggorlen Jan 13 '23 at 06:31
  • It's called an implicit return. It's not something specific to React. It's built into the language. This may help - https://stackoverflow.com/questions/49425755/arrow-functions-and-the-use-of-parentheses-or-or – I0_ol Jan 13 '23 at 07:10

0 Answers0