Вложенные компоненты не будут отображаться

Question

Для ознакомления с моим макетом файла у меня есть app.js

import React from 'react';
import ReactDOM from 'react-dom';
import AppRouter from './routers/AppRouter';
import 'normalize.css/normalize.css';
import './styles/styles.scss';

ReactDOM.render(<AppRouter />,document.getElementById('app'));

, который отображает AppRouter.js:

//Importing Libraries
import React from 'react';
import {BrowserRouter, Route, Switch, Link, NavLink} from 'react-router-dom';

//Importing Pages
import HomePage from '../pages/HomePage';
import F from '../pages/F';
import F from '../pages/Fe';
import F from '../pages/F';
import F from '../pages/F';
import FAQPage from '../pages/FAQPage';
import AboutUsPage from '../pages/AboutUsPage'
import ContactPage from '../pages/ContactPage';
import FranchisePage from '../pages/FranchisePage';
import GiftPage from '../pages/GiftPage';
import NotFoundPage from '../pages/NotFoundPage';

//Importing Components
import Header from '../components/Header';
import Footer from '../components/Footer';


//Router configuration
/*switch is going to look through the route paths in order until it finds a match */
const AppRouter = () => (
    <BrowserRouter>
    <div>
        <Header />
        <Switch>
            <Route path="/" component={HomePage} exact={true}/>
            <Route path="/F" component={F} exact={true}/>
            <Route path="/F" component={F} exact={true}/>
            <Route path="/birthday" component={F} exact={true}/>
            <Route path="/F" component={F} exact={true}/>
            <Route path="/faq" component={FAQPage} exact={true}/>
            <Route path="/about-us" component={AboutUsPage} exact={true}/>
            <Route path="/contact" component={ContactPage} exact={true}/>
            <Route path="/franchise" component={FranchisePage} exact={true}/>
            <Route path="/gift" component={GiftPage} exact={true}/>
            <Route component={NotFoundPage}/>
        </Switch>
        <Footer/>
    </div>
    </BrowserRouter>
);

export default AppRouter;

(некоторые имена были изменены на f по соображениям конфиденциальности сотрудников)

Страницы, которые являются просто текстовыми компонентами, отображаются очень хорошо, когда я нажимаю на них, например, страница о нас:

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Switch, Link, NavLink} from 'react-router-dom';

const AboutUsPage = () => (
    <div>
        Content For AboutUsPage
    </div>
);

export default AboutUsPage;

Но когда я хочу визуализировать компонент на этих страницах, ничего не появляется (вся страница становится пустой)

Вот что я пытаюсьdo:

Вот страница часто задаваемых вопросов

import React from 'react';
import ReactDOM from 'react-dom';
import FAQInfo from './FAQRevealnfo';
import {BrowserRouter, Route, Switch, Link, NavLink} from 'react-router-dom';

const FAQPage = () => (
    <div id>
        <h1>FREQUENTLY ASKED QUESTIONS</h1>
        //trying to render FAQInfo
        <FAQInfo
        question="Question"
        answer="answer"
        >
        </FAQInfo>
    </div>
);

export default FAQPage;

и вот компонент, который я пытаюсь отобразить внутри него:

import React from 'react';

export default class FAQRevealInfo extends React.Component {
    constructor(props) {
        super(props);
        this.toggle = this.toggle.bind(this);
        this.state = {
            visibility: false
        };
        this.question = this.question.bind(this);
        this.answer = this.answer.bind(this);
    }
    toggle (){
        this.setState((prevState) => {
            return {
                visibility: !prevState.visibility
            };
        });
    }
    render(){
        return (
            <div>
                <h1>{this.question}</h1>
                <button onClick = {this.toggle}>
                
                </button>
                 <div>
                    <p>{this.state.visibility&&this.answer}</p>
                 </div>
            </div>
        );  
    }
}

Answer 1

Я изменил конструктор на this.question = "text" и this.answer = "text" и рендеринг с помощью this.props, теперь он работает.