Line 8: Parsing error: this is a reserved word

Question

I'm trying to make a detail page about each item from the API; however it doesn't seem to work, it gives me a "Line 8: Parsing error: this is a reserved word" error. Also I'm not sure if my code in the DetailPage.js works properly, I want to get the the data about the clicked item on the home page on the detail page so I check if the ID matches any of the ones from the API.

My App.js

import React, { Component } from 'react';
import { BrowserRouter,Route,Switch } from 'react-router-dom';
import Brewery from './components/Brewery'
import DetailPage from './components/DetailPage'
import Menu from './components/Menu'

class App extends Component {
  render() {
    return (
      <div>
      <div> <Menu /> </div>
      <div>
        <BrowserRouter>
          <Switch>
            <Route path="/brewery" component={Brewery} exact/>
            <Route path="/brewery/:id" component={DetailPage} exact/>
          </Switch>
        </BrowserRouter>
      </div>
      </div>
    )
  }
}

export default App;

My Brewery.js

import React from "react";
import { Link } from 'react-router-dom';

class Brewery extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      breweries: []
    };
    }

  componentDidMount() {
    fetch("https://api.openbrewerydb.org/breweries")
      .then(response => response.json())
      .then((data) => {
        this.setState({
          breweries: data,
        })
      })
  }

  render() {

    const { breweries } = this.state;

    return(
        <ul>
          {breweries.slice(0,10).map((brewery) =>
              <li key={brewery.id}>
                <Link to={`/brewery/${ brewery.id }`}>
                  {brewery.name}
                </Link>
              </li>
          )}
        </ul>
    )
  }
}

export default Brewery;

My DetailPage.js

import React from "react";
import Brewery from './Brewery'

class DetailPage extends React.Component {
  render() {
    const paramsId = `${this.props.match.params.id}`
    return(
        {this.state.breweries.map((brewery) => {
          if (brewery.id === paramsId) {
            return <div>{brewery.name}</div>
        }})
    )
  }
}
}

export default DetailPage;

Answer 1

As @SLaks pointed out in the comments, you don't need the curlies ( {} ) when using Javascript expressions out of your JSX. Just write your expressions directly.

render() {
  // You don't need to use curlies here.
  console.log("foo");
  return (
    // or here if you start your return statement with a Javascript expression.
    foo.map(el => <div>{Here you need it if it is a JS expression}</div>)
  );
}

So drop the top curlies in the return part of DetailPage component. But after that, you will encounter another problem not related to your current issue. In your DetailPage you don't have any state of breweries . You are fetching them in your Brewery component. So, you don't have them in the DetailPage component. You have an id coming from your router, so as a naive approach you can use it again to fetch a single brewery.

So:

class DetailPage extends React.Component {
  state = {
    brewery: {}
  };

  componentDidMount() {
    const { id } = this.props.match.params;
    fetch(`https://api.openbrewerydb.org/breweries/${id}`)
      .then(response => response.json())
      .then(data => {
        this.setState({
          brewery: data
        });
      });
  }
  render() {
    return <p>{this.state.brewery.name}</p>;
  }
}