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>`.
As @thinhvo said you cannot do logic inside return statement. Although looking into your needs, A simple work around could be like this.

```
const Jobs = (props) => {
  let conditionalComp = null;
  if(/*some condition*/ ) {
    conditionalComp = 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>
      );
  }
  return (
    <section id="jobs">
      <div>
        {conditionalComp}
      </div>
    </section>
  )
}

```