I'm trying to create a modal in React that displays some information when a button
in App.js
is clicked.
When I put the modal code in App.js
, it successfully populated the data (albeit for every li at once).
I moved the modal to it's own component, but I'm getting Cannot read property 'name' of undefined
.
Here's my App.js code:
const APIURL = 'https://api.openbrewerydb.org/breweries?';
const citySearch = 'by_city=boston';
class App extends Component {
constructor(props) {
super(props)
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
this.state = {
error: null,
isLoaded: false,
breweries: [],
show: false
};
}
handleClose() {
this.setState({ show: false });
}
handleShow() {
this.setState({ show: true });
}
componentDidMount() {
fetch(APIURL + citySearch)
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
breweries: result
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render() {
const { error, isLoaded, breweries } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<div>
<ul>
{breweries.map(brewery => (
<div className="brewery-card">
<li key={brewery.id}>
<p id="brewery-name">{brewery.name}</p>
<p id="brewery-type">{brewery.brewery_type}</p>
<p id="brewery-address">{brewery.street} {brewery.city}, {brewery.state} {breweries.postal_code} </p>
<button onClick={this.handleShow}>Details</button>
<a href={brewery.website_url} target="_blank" rel="noopener noreferrer">Visit Site</a>
</li>
</div>
))}
</ul>
<DetailsModal props={this.props.brewery} show={this.state.modalShow} />
</div>
);
}
}
}
export default App;
And here's my component code, which isn't receiving props:
import React, { Component } from 'react';
import { Modal, Button } from 'react-bootstrap'
class DetailsModal extends Component {
constructor(props) {
super(props);
this.state = {
show: false
};
}
render() {
const brewery = this.props.brewery;
return (
<Modal {...this.props}>
<Modal.Header closeButton>
<Modal.Title>{brewery.name}</Modal.Title>
</Modal.Header>
<Modal.Body>{brewery.street} {brewery.city}, {brewery.state} {brewery.postal_code}</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
)
}
}
export default DetailsModal;
What am I missing that is preventing props from App.js
from being used in DetailsModal.js
?