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: 
It has to do with what [babel is transforming the code into](http://babeljs.io/docs/plugins/transform-react-jsx/#example-react).

```
return <div>{myValue}</div>;

```

Becomes

```
return React.createElement("div", null, myValue);

```

So having a random `console.log` in the middle of that, such as

```
return <div>{
  console.log(myValue);
  myValue
}</div>;

```

Would become

```
return React.createElement("div", null, console.log(myvalue); myValue);

```

Obviously that is no longer valid javascript. Because of this, the only thing that is valid inside a JSX transformation is an expression that evaluates to a single value.

---

Reading some of the comments on other answers, I see you are actually wanting to do conditional logic inside your JSX.

For this, you have a few options at your disposal.

**1. Extract a variable**

```
let conditionalValue = "Loading";

if (condition)
  conditionalValue = myValue;

return <div>{conditionalValue}</div>;

```

**2. Extract a method**

```
return <div>{renderValue()}</div>

...

renderValue() {
  if (condition)
    return myValue;

  return "Loading"
}

```

**3. Use a ternary**

```
return <div>{condition ? myValue : "Loading"}</div>;

```

**4. Exploit boolean evaluation**

If you want to show a fallback for something

```
return <div>{myValue || "Loading"}</div>;

```

If you want to only show something based on a condition

```
return <div>{condition && myValue}</div>;

```

---

**NOTE:** all of the above examples are just as valid if you replace `myValue` with another component, e.g. `<p>Hello World</p>`.
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