Когда я пытаюсь экспортировать компонент HashiraSelect в свое приложение. js, который я использую в качестве маршрутизатора, отображается только код
h2
.
Когда я запустить hashira-screen. js в одиночку, отображение кнопок и других хорошо отображается.
Это приложение. js
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import ReactDOM from 'react-dom';
import Home from './homepage';
import HashiraSelect from './hashira-screen';
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Switch>
<Route path="/" component={Home} exact/>
<Route path="/champselect" component={HashiraSelect} exact/>
</Switch>
</div>
</BrowserRouter>
);
}
}
export default App;
Это мой индекс. js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Это мой экран хешира. js.
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {render} from 'react-dom';
import rengokuimg from './Images/rengokuIMG.png';
import sanemiimg from './Images/sanemiIMG.png';
import shinobuimg from './Images/shinobuIMG.png';
import giyuuimg from './Images/giyuuIMG.png';
import './CSS/index.css';
import bground from './Images/selectscreenbgIMG.jpg'
let hashiraList=[
{"name":"Rengoku Kyojiro", "description":"Flame Hashira", "age":20, "element":"Flame","imgsource":rengokuimg,"Choice":"Rengoku"},
{"name":"Giyuu Tomioka", "description":"Water Hashira", "age":21, "element":"Water","imgsource":giyuuimg,"Choice":"Giyuu "},
{"name":"Sanemi Shinazugawa", "description":"Wind Hashira", "age":22, "element":"Wind","imgsource":sanemiimg,"Choice":"Sanemi"},
{"name":"Shinobu Kocho", "description":"Insect Hashira", "age":22, "element":"Poison","imgsource":shinobuimg,"Choice":"Shinobu"}
]
const Hashira =({name, description,element,imgsource,Choice,onChange}) => {
return(
<div className="header">
<img src={bground} className="bgroundimg"/>
<button className="button">
<h2>{name}</h2>
<div className="champbox" onClick={()=>onChange(Choice)}><img src={imgsource} height="150" width="100" /></div>
<p>Element: {element}</p>
<p>Description: {description}</p>
{/* <button onClick={()=>console.log({Choice})}>Select the {element} hashira</button> */}
{/* <button onClick={()=>onChange(Choice)}> Select the {element} hashira</button> */}
</button>
</div>
)
}
const Form=()=>{
return(
<div className="form">
<form>
<label>Input you desired username</label>
<input type="text"/>
<button>Click to continue your adventure.</button>
</form>
</div>
)
}
class HashiraSelect extends React.Component{
state = {
Chosen : false,
choice: '',
element:null
}
toggleChoose=()=>{
this.setState({
Chosen: !this.state.Chosen
})
}
onChange = choice => {
this.setState({ choice, Chosen: true });
};
render(){
//console.log(this.state)
const {hashiras} = this.props;
const { choice } = this.state;
return(
<div >
{/* <h1>You {this.state.Chosen ? `chose ${choice}`:'have not yet chosen a Hashira'}</h1> */}
{/* <button onClick={this.toggleChoose}>Choose</button> */}
{(hashiras) && hashiras.map(
(hashira, idx) =>
<Hashira
key={idx}
name={hashira.name}
description={hashira.description}
age={hashira.age}
element={hashira.element}
Choice={hashira.Choice}
imgsource={hashira.imgsource}
onChange={this.onChange}
/>
)}
{/* <div className="chosen">{choice && <h2>{`Hashira Chosen:${choice}`}</h2>}</div> */}
<div>
<div className="header" >{<h2>{`Hashira Chosen:${choice}`}</h2>}</div>
<h2 className="header">{this.state.Chosen ? <Form/> :null}</h2>
</div>
{/* <button onClick ={this.toggleOpenClosed}>Choose</button> */}
{/* <HashiraSelect hashiras={hashiraList}/> */}
</div>
)
}
}
// render(
// <HashiraSelect hashiras={hashiraList}/>,
// document.getElementById('root')
// )
export default HashiraSelect;
Это моя домашняя страница. Что отображается правильно.
import React from 'react';
import bground from './Images/homepageIMG.jpg';
import './CSS/homepage.css';
import {render} from 'react-dom';
import {Link} from 'react-router-dom';
class Home extends React.Component{
render(){
return(
<div className>
<img src={bground} className="bgroundimg" />
<h1 className="Welcome">Welcome to Kimetsu No Yaiba </h1>
<h2>Will of Fire</h2>
<Link to="/champselect">
<button>Click Here to Select A Hashira</button>
</Link>
</div>
)
}
}
export default Home;
Что отображается без экспорта и запуска приложения champselect как index. 
Что отображается => 
Спасибо за вашу помощь.