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: 
try to keep the return clean. try to make maps and processing outside the render return. 

```
const Jobs = (props) => {
    console.log("THIS DOESN'T WORK")
    const jobs = 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>
                {jobs}
            </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