title: how to use n model in one root in reactjs?
body: <p>hi i have one root like this code</p>
  
  <pre><code>&lt;body&gt;
  &lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
  &lt;button &gt;Platform&lt;/button&gt;
  &lt;button &gt;Game&lt;/button&gt;
  &lt;button &gt;Score&lt;/button&gt;
  &lt;hr /&gt;
  
  &lt;div id="root"&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>index.js code</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import 'bootstrap/dist/css/bootstrap.min.css';
  import './index.css';
  import App from './App';
  import * as serviceWorker from './serviceWorker';
  
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  
  serviceWorker.unregister();
  </code></pre>
  
  <p>app.js code</p>
  
  <pre><code>    import React ,{Component} from 'react';
  import axios from 'axios';
  import { Modal,ModalHeader,ModalBody,ModalFooter,FormGroup,Label,Input,Table ,Button} from 'reactstrap';
  
  
  class App extends Component{
    state={
      books:[],
      NewBookData:{
        Title:'',
        Rating:''
      },
      EditBookData:{
        Id:'',
        Title:'',
        Rating:''
      },
  
      NewBookModal:false,
      EditBookModal:false
    }
  ....
  </code></pre>
  
  <p>this root is ok for default jobs,but i want ovveride this root base on platform ,game , ...
  how i can this work?</p>