index.jsx (why the definition of showCityLayer prompt is not defined, it can be used if it is defined as test, and the rest is undefined no matter how it is defined)
import React, { Component } from "react";
import PropTypes from "prop-types";
import TopBar from "./components/TopBar";
import Slide from "./components/Slide";
import "./index.css";
export default class Home extends Component {
showCityLayer = () => {
console.log("show city layer");
}
render() {
return (
<div className="home">
<TopBar city="" showCityLayer={this.showCityLayer} />
<div className="home__slide">
<div className="home__slideWrap">
<Slide data={[]} />
</div>
</div>
</div>
);
}
}
Home.PropTypes = {};import React from "react";
import PropTypes from "prop-types";
import "./TopBar.css";
const TopBar = ({ city, showCityLayer }) => {
return (
<div className="topBar">
<div className="topBar__city" onClick={showCityLayer}>
{city}
</div>
<div className="topBar__search" />
<div className="topBar__scan" />
</div>
);
};
TopBar.PropTypes = {
city: PropTypes.string.isRequired,
showCityLayer: PropTypes.func.isRequired
};
export default TopBar;