Stencil: Documentation typo on template map function usage

Created on 14 Sep 2017 · 5Comments · Source: ionic-team/stencil

Resources:
Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

https://stenciljs.com/docs/templating

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
Inner curly brackets should be just bracket. This doesn't produce any error messages and array is not rendered.

Expected behavior:
Error should be printed from compiler.
Documentation should also be fixed.

Steps to reproduce:
Follow instructions from web page.

Related code:

render() {
  return (
    <div>
      {this.todos.map( todo => {
        <div>
          <div>{todo.taskName}</div>
          <div>{todo.isCompleted}</div>
        </div>
      })}
    </div>
  )
}

Other information:

needs reply

Source

ilkkanisula

Most helpful comment

@ilkkanisula @jgw96

I think I got the curly braces you meant there. Use brackets right after the fat arrow => () instead of => {}

/** The following should be the correct one */
...
return (
  <div>
    {
      this.todos.map((todo) => ( /** Not curly braces */
        <div>
          <div>{todo.taskName}</div>
          <div>{todo.isCompleted}</div>
        </div>
      )) /** Not curly braces */
    }
  </div>
);
...

motss on 14 Sep 2017

👍2

All 5 comments

@ilkkanisula Can hardly spot what's wrong here.

motss on 14 Sep 2017

Hey, thanks for opening an issue with us. Maybe im not following correctly, but that bit of code is correct. Am i looking at something wrong here?

jgw96 on 14 Sep 2017

@ilkkanisula @jgw96

I think I got the curly braces you meant there. Use brackets right after the fat arrow => () instead of => {}

/** The following should be the correct one */
...
return (
  <div>
    {
      this.todos.map((todo) => ( /** Not curly braces */
        <div>
          <div>{todo.taskName}</div>
          <div>{todo.isCompleted}</div>
        </div>
      )) /** Not curly braces */
    }
  </div>
);
...

motss on 14 Sep 2017

👍2

it works with curly braces if you add a return