App.js introduces a subcomponent SnackbarExampleSimple
import React from "react";
import ReactDOM from "react-dom";
import SnackbarExampleSimple from "./Header"
const App = () => (
<div>
{/* <Header/> */}
<SnackbarExampleSimple/>
</div>
);
export default App;
the code in Header.js, is basically a copied official website instance
import React from "react";
// import ReactDOM from "react-dom";
// import "./css/header.css";
import Snackbar from "material-ui/Snackbar";
import RaisedButton from "material-ui/RaisedButton";
export default class SnackbarExampleSimple extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false,
};
}
handleClick = () => {
this.setState({
open: true,
});
};
handleRequestClose = () => {
this.setState({
open: false,
});
};
render() {
return (
<div>
<RaisedButton
onClick={this.handleClick}
label="Add to my calendar"
/>
<Snackbar
open={this.state.open}
message="Event added to your calendar"
autoHideDuration={4000}
onRequestClose={this.handleRequestClose}
/>
</div>
);
}
}
A bunch of wrong reports