通过道具传递物品

Question

I'm trying to pass down the object through props to show the user more details about the item on the detail page but something seems to be broken. It gives me a './src/components/Trial.js Line 38: Parsing error: Unexpected token, expected "," ' error

My brewery.js

import React from "react";
import Trial from './'
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,
        })
      })
  }

  renderBreweries = () => {
    const { breweries } = this.state;
    return breweries.slice(0,10).map((brewery) =>
      <Brewery key={brewery.id} brewery={brewery} />
  )
  }

  render() {

    const { breweries } = this.state;

    return(
      <div>
        {this.renderBreweries()}
      </div>
    )
  }
}

export default Brewery;

My trial.js

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

class Trial extends React.Component {
  render() {
    const { brewery } = this.props;
    return(
      <div>
        {brewery.name}
      </div>

  }
}

export default Trial; 

Answer 1

1. You have bracket issue in trial.js

2. You are running into infinite calls, creating brew in did mount

   return breweries.slice(0,10).map((brewery) => <Brewery key={brewery.id} brewery={brewery} /> )

Every time this calls you are again calling the api and getting the same data. because of this you are never gonna get the result.

Create new component to render the result or you can use existing one but do not call recursively. something like this

export const RenderBreweries=(props) =>{
  return <div>{props.brewery.id}</div>
}

And call it like this

return breweries.slice(0, 10).map((brewery) =>
      <RenderBreweries key={brewery.id} brewery={brewery} />
    )

This will render the breweris. and yes you will get the props passed key and brewery by props.key and props.brewery

Your component should look like this

import React from "react";
import Trial from './'
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,
        })
      })
  }

  renderBreweries = () => {
    const { breweries } = this.state
    return breweries.slice(0, 10).map((brewery) =>
      <RenderBreweries key={brewery.id} brewery={brewery} />
    )
  }

  render() {
   console.log(this.breweries)
    const { breweries } = this.state;

    return (
      <div>
        {this.renderBreweries()}
      </div>
    )
  }
}

export const RenderBreweries=(props) =>{
  return <div>{props.brewery.id}</div>
}

export default Brewery;

Demo

Answer 2

You open a parenthesis after return in Trial.js and never close it.

class Trial extends React.Component {
  render() {
    const { brewery } = this.props;
    return(
      <div>
        {brewery.name}
      </div>
    ); //<-- missing part
  }
}

I would recommend using a linter, like eslint that can save you from a lot of errors like this.

Answer 3

You have an extra , after breweries: data (should not be the case though) , did you try removing that ?

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

and below as well, there is a missing parenthesis, you can change Trial as below,

class Trial extends React.Component {
    render() {
    return(
      <div>
        {this.props.brewery.name}
      </div>
    ); // here
  }
}

So when you want to render a Trial, you should use,

<Trial brewery={brewery} />