Question: Still getting to grips with React and ES6. I have the following functional presentation component which works fine:

```
const Jobs = (props) => (
  <section id="jobs">
    <div>
      {
        props.jobs.map(job =>
          <div className="job" key={job.slug}>
            <p><strong>{job.title} at <Link to={"/jobs/" + job.slug}>{job.company}</Link></strong></p>
            <p>{job.intro}</p>
          </div>
        )
      }
    </div>
  </section>
)

```

However, when I try to add some extra JS between the brackets as shown below I get errors about unexpected token.

```
const Jobs = (props) => (
  <section id="jobs">
    <div>
      {
        console.log("THIS DOESN'T WORK")
        props.jobs.map(job =>
          <div className="job" key={job.slug}>
            <p><strong>{job.title} at <Link to={"/jobs/" + job.slug}>{job.company}</Link></strong></p>
            <p>{job.intro}</p>
          </div>
        )
      }
    </div>
  </section>
)

```

Could someone explain why this doesn't work.

Answer: 
According to React JSX docs:

> 
> You can embed any JavaScript expression in JSX by wrapping it in curly
>  braces
> 
> 
> 

and in JS the expression is:

> 
> An expression is any valid unit of code that resolves to a value.
> 
> 
> 

So you can't put two or more expressions in single curly braces (`console.log` is one expression and maping over jobs is second expression). [@Michael Peyper](https://stackoverflow.com/users/6902543/michael-peyper) has already thoroughly explained in his answer why this results in errors.

If you want to use `console.log` in your example you can just move it to separate bracecs:

```
const Jobs = (props) => (
  <section id="jobs">
    <div> 
      { console.log("THIS DOESN'T WORK") }
      {
        props.jobs.map(job =>
          <div className="job" key={job.slug}>
            <p><strong>{job.title} at <Link to={"/jobs/" + job.slug}>{job.company}</Link></strong></p>
            <p>{job.intro}</p>
          </div>
        )
      }
    </div>
  </section>
)

```
Actually you can't do that by the current way, the first `console.log("THIS DOESN'T WORK")` is still inside the JSX, and the JSX will only understand react's elements or DOM.

Therefore, if you want to do extra JS, please do inside the `map` function (before returning value):

```
<div>
  {
    props.jobs.map((job) => {
      console.log("something here");
      return (
        <div className="job" key={job.slug}>
          <p><strong>{job.title} at <Link to={"/jobs/" + job.slug}>{job.company}</Link></strong></p>
          <p>{job.intro}</p>
        </div>
      )
    }
    )
  }
</div>

```

=====

Did you take notice of me adding `()` and `{}` ? This is, in fact, the way we write in ES6, using `=>` for lexical binding the function to the current react-component.

Your previous code `props.jobs.map( job => <div> </div> )` is just a fast way to return some JSX element (which is the `div`)

=====

**ADDED VERSION**: to do the logic (conditional) for the mapping:

```
const Jobs = (props) => {
  let returned_jsx = (<div>No Job!</div>);
  if (props.jobs.length) { // or whatever condition you need!
    returned_jsx = (
      <section id="jobs">
        <div>
          {
            props.jobs.map(job =>
              <div className="job" key={job.slug}>
                <p><strong>{job.title} at <Link to={"/jobs/" + job.slug}>{job.company}</Link></strong></p>
                <p>{job.intro}</p>
              </div>
            )
          }
        </div>
      </section>
    )
  }
  return returned_jsx;
}    

```

The above code is just an example on how to do logic to return different things in JSX. If you still have errors, please post here and we will discuss further, thanks