Сброс состояния компонента

import React from 'react' 
import ReactDOM from 'react-dom' 
import Registration from './components/Registration' 
import Course from './components/Course' 
import Theme from './components/Theme' 
import Lesson from './components/Lesson' 
import Qst from './components/Qst' 
import Test from './components/Test' 
import ShowLesson from './components/ShowLesson' 
import ShowQuest from './components/ShowQuest' 
import TestAnswer from './components/TestAnswer' 
import QstAnswer from './components/QstAnswer' 
import Delete from './components/Delete' 
import {Router, Route, Link} from 'react-router-dom' 
import createBrowserHistory from "history/createBrowserHistory" 
import './preload.css' 
 
 
 
const customHistory = createBrowserHistory(); 
const btns = ( 
	<div className="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> 
		<div className="btn-group btn-group-lg" role="group" aria-label="First group"> 
			<Link to="/admin/add" className="course btn btn-secondary">ADD</Link> 
			<Link to="/admin/delete" className="qst btn btn-secondary">DELETE</Link> 
			<Link to="/admin/showlesson" className="map btn btn-secondary">SHOW LESSON</Link> 
			<Link to="/admin/showqst" className="lesson btn btn-secondary">SHOW QUEST</Link> 
		</div> 
	</div>); 
let header = new Headers({ 
	'Content-Type': 'application/json', 
	'Accept': 'application/json' 
})	 
 
let myInit = { method: 'GET', 
	   mode: 'cors', 
	   header: header, 
	} 
const endpoint = 'http://localhost:8080/admin/start'; 
 
ReactDOM.render(<div id="preloader"> 
					<div id="loader"></div> 
				</div>,  
				document.getElementById('root')); 
 
function getData () { 
	fetch(endpoint, myInit) 
		.then(res => res.json()) 
		 
		.then((res) => { 
			console.log(`Request to db`) 
			let WrapperAdd = () => { 
				const add = ( 
					<div className='container'> 
						{btns} 
						<br></br> 
						<div className='mess'></div> 
						<Course /> 
						<Theme course={res.course} /> 
						<Lesson course={res.course} data={res.ltheme}/> 
						<Qst course={res.course} data={res.ltheme} /> 
						<Test data={res.ltheme} /> 
						<QstAnswer qst={res.qst} /> 
						<TestAnswer test={res.test} /> 
					</div> 
				) 
				return (add) 
			} 
			let NavBar = () => { 
				const nav = ( 
					<div className='container'> 
						{btns} 
						<br></br> 
					</div> 
				) 
				return (nav) 
			} 
			let DeleteWrapper = () => { 
				const del = ( 
					<div className='container'> 
						{btns} 
						<br></br> 
						<div className='mess'></div> 
						<Delete data={res} /> 
					</div> 
				) 
				return (del) 
			} 
			let ShowLessonWrapper = () => { 
				const sl = ( 
					<div className='container'> 
						{btns} 
						<br></br> 
						<div className='mess'></div> 
						<ShowLesson data={res.ltheme} /> 
					</div> 
				) 
				return (sl) 
			} 
			let ShowQstWrapper = () => { 
				const sqst = ( 
					<div className='container'> 
						{btns} 
						<br></br> 
						<div className='mess'></div> 
						<ShowQuest qst={res.qst} test={res.test} /> 
					</div> 
				) 
				return (sqst) 
			} 
			 
			ReactDOM.render(<Router history={customHistory}> 
				<div> 
					<Route path="/admin/showlesson" component={ShowLessonWrapper} /> 
					<Route path="/admin/showqst" component={ShowQstWrapper} /> 
					<Route path="/admin/delete" component={DeleteWrapper} /> 
					<Route exact path="/admin" component={NavBar} /> 
					<Route exact path="/" component={Registration} /> 
					<Route path="/admin/Add" component={WrapperAdd} /> 
				</div> 
			</Router>, document.getElementById('root')); 
		}) 
	 
} 
getData() 
setInterval(getData, 7000) 
 
 
export default getData;

import React, {Component} from 'react' 
import 'bootstrap/dist/css/bootstrap.min.css' 
let $ = require("jquery") 
 
let header = new Headers({ 
	'Accept': 'application/json, text/plain, */*', 
	'Content-Type': 'text/javascript' 
}); 
 
class ShowLesson extends Component { 
	render () { 
		const ltheme = this.props.data.map((el) => { 
			let c = el.lcourse 
			let t = el.ltheme 
			return (`${c} -- ${t}`) 
		}) 
		const courseTag = ltheme.map((el, i) => { 
			return (<option key={`lts ${i}`} value={this.props.data[i].ltheme}>{el}</option>) 
		}) 
 
		function Req () { 
			let lesson = $('#showLessons').val() 
			let body = [lesson] 
			let endpoint = 'http://localhost:8080/admin/showlesson' 
				let myInit = { method: 'POST', 
					   mode: 'cors', 
					   header: {header}, 
					   body: body 
					}; 
			fetch(endpoint, myInit) 
				.then(res => res.json()) 
				.then((res) => { 
					if (res.statusEror) { 
						$('.mess').text(res.message) 
						$('.mess').removeClass('success').addClass('err') 
						setTimeout(()=>{ 
							$('.mess').removeClass('err'); 
							$('.mess').text(''); 
						}, 2000) 
					} else { 
						$(".showAria").show() 
						$(".showAria").text(res[0]) 
					} 
				}) 
		} 
		return ( 
				<div className={'container'}> 
					<form action="" id="themeform" noValidate> 
						<div className="input-group mb-3"> 
							<select required className="form-control" id="showLessons"> 
							{courseTag} 
							</select> 
							<div className="input-group-append"> 
								<button onClick={Req} className="btn btn-outline-secondary" type="button" id="addTheme">Show Lesson</button> 
							</div> 
						</div> 
					</form> 
					<div className='showAria'></div> 
				</div> 
				 
		) 
	} 
} 
export default ShowLesson;