Why do I report an error when I introduce a component like this?

The error reported by

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