react pass data to two component,but one render failed

I use react to make a submenulist.The parent component get json, pass the json to another two child component.But the only child success to display, another one failes.Two childs shared the grandson component.

class SubMenu extends React.Component {
  render() {
    var submenulink = require("../../../conf/navigation.json")

  return (
    <div>
       <PoliticsSubMenu politics_link={submenulink.politics}/>
       <LawSubMenu law_link={submenulink.law}/>
    </div>
)}}


class PoliticsSubMenu extends React.Component {
  render() {
    return (
      <SubMenuList link={this.props.politics_link} />
)}}

class LawSubMenu extends React.Component {
  render() {
    console.log(this.props.law_link)
    return (
      <SubMenuList link={this.props.law_link}/>
    )
  }
}
class SubMenuList extends React.Component {

  render() {
    const links = this.props.link;
    const listNames = links.map((item) =>
      <li>{item.description}</li>
    )

    return (
      <li className="active">
          <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">politics</a>
          <ul className="collapse list-unstyled" id="homeSubmenu">
              <li>{listNames}</li>
          </ul>
      </li>
    )
  }
}