is bundle.js:42319 Uncaught TypeError: Cannot read property "map" of undefined
the initial page code is like this
import React from "react"
import SearchInput from "../SearchInput"
import "./index.less"
import { Link } from "react-router";
class IndexHead extends React.Component {
constructor(props,context){
super(props,context);
}
render() {
return(
<div className="HomeHeader page-wrap">
<div className="leftcity"><Link to="/city">{this.props.cityName} <i className="icon-angle-down"></i></Link></div>
<div className="inputwrap page-wrap">
<input placeholder=""/>
<i className="icon-search"></i>
</div>
<div className="leftcity">
<i className="icon-user"></i>
</div>
</div>
)
}
}
export default IndexHead
then I decided to pull out the input box.
so I put
<div className="inputwrap page-wrap">
<input placeholder=""/>
<i className="icon-search"></i>
</div>
this piece is taken out.
import React from "react"
import "./style.less"
class SearchInput extends React.Component {
constructor(props, context) {
super(props, context);
}
render() {
return (
<div className="inputwrap page-wrap">
<input placeholder=""/>
<i className="icon-search"></i>
</div>
)
}
}
export default SearchInput
and then introduce it on the page. I made a mistake.
import React from "react"
import SearchInput from "../SearchInput"
import "./index.less"
import { Link } from "react-router";
class IndexHead extends React.Component {
constructor(props,context){
super(props,context);
}
render() {
return(
<div className="HomeHeader page-wrap">
<div className="leftcity"><Link to="/city">{this.props.cityName} <i className="icon-angle-down"></i></Link></div>
<SearchInput/>
<div className="leftcity">
<i className="icon-user"></i>
</div>
</div>
)
}
}
export default IndexHead
later, I just extracted the input box and introduced it without making a mistake. This is why