title: React.js how do use the same page layout but different Data/information for personal information?
body: <p>Currently, I trying to understand how react.js is working with help with react-router-dom. I have to face issues that I wanted to use the same layout for the personal detail form. but I want it to display different data for two different people. let say I click on &quot;phua&quot; and then it will use the layout and get the data from Data.js and provide the information, if I click on &quot;foong&quot; then the system will use the same layout but uses the data from foong in data.js</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import &quot;./App.css&quot;
  import Navbar from './components/Navbar';
  import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
  import Home from './components/pages/HomePage/Home'
  import Footer from './components/pages/Footer/Footer';
  import Service from './components/Service';
  
  import Info from './components/pages/Info/Info';
  
  
  function App(){
    return(
      &lt;Router&gt;
        &lt;Navbar /&gt;
        &lt;Switch&gt;
          &lt;Route path='/' exact component={Home}/&gt;
          &lt;Route path='/service' exact component={Service}/&gt;
          &lt;Route path='/Information' component={Info/phua}/&gt;
          &lt;Route path='/Information' component={Info/foong}/&gt;
  
        &lt;/Switch&gt;
        &lt;Footer /&gt;
      &lt;/Router&gt;
    );
  }
   
  
  export default App;
  </code></pre>
  <p>Information.js</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import &quot;./Information.css&quot;
  function Information({img, alt, name, age, gender}) {
      return (
          &lt;&gt;
          &lt;div className=&quot;container&quot;&gt;
              &lt;div className=&quot;row_details&quot;&gt;
                  &lt;div className=&quot;col-personal-logo&quot;&gt; 
                      &lt;img src={img} alt={alt} className=&quot;personal-image&quot;/&gt;
                      &lt;h2&gt;Name:{name}&lt;/h2&gt;
                      &lt;p&gt;Age:{age}&lt;/p&gt;
                      &lt;p&gt;Gender:{gender}&lt;/p&gt;
                      &lt;p&gt;&lt;/p&gt;
                  &lt;/div&gt;  
                  &lt;div className=&quot;col-personal&quot;&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
              
          &lt;/&gt;
      )
  }
  
  export default Information
  </code></pre>
  <p>Data.js</p>
  <pre class="lang-js prettyprint-override"><code>export const phua= {
      img:'images/dribbble-avatar.webp', 
      alt:'Phua',
      name:'Phua Yeong Tsann',
      age:'42', 
      gender:'Male',
  }
  
  export const foong= {
      img:'avatar_dribbble.webp', 
      alt:'Foong',
      name:'Foong',
      age:'32', 
      gender:'Female',
  }
  
  
  </code></pre>
  <p>Info.js</p>
  <pre><code>import React from 'react'
  import Information from '../../Information'
  import {phua} from './Data'
  
  function Info() {
      return (
          &lt;&gt;
              &lt;Information {...phua} /&gt;
              
          &lt;/&gt;
      )
  }
  
  export default Info
  </code></pre>