title: Loading data into component based on route in react
body: <p>I just started learning React and I feel I am facing a common problem most beginners will face. I am building a really simple React App at the moment. I am aiming to build a website with a navigation and some dynamic content that changes according to the navigation item that is clicked. However the content has always the same layout so the only part that needs to be changed is the data that is displayed in the content component. </p>
  
  <p>I managed to build a working version however it feels wrong since it misses to update the content component. Instead I created for every page a new component (List.js and List2.js) that loads data from two differen files (data.js and data2.js). I am wondering now how I can just use one component (list.js) and always update its content based on the category that is clicked in the navigation.  This is my current code:</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  import List from '../components/List'
  import Nav from '../components/Nav'
  import data from '../src/data/data'
  
  require ('../src/sass/App.scss');
  
      class App extends Component {
  
       render () {
          return (
          &lt;div className="wrapper"&gt;
          &lt;Nav /&gt;
          {this.props.children}
  
  
  
           &lt;/div&gt;
          )
        }
  
      }
  
      export default App
  </code></pre>
  
  <p><strong>routes.js</strong></p>
  
  <pre><code>import React from 'react'
  import { Route, IndexRoute } from 'react-router'
  import App from '../components/App';
  import List from '../components/List';
  import List2 from '../components/List2';
  import IndexPage from '../components/IndexPage';
  
  
  
  
  
  const routes = (
    &lt;Route path="/" component={App}&gt;
      &lt;IndexRoute component={IndexPage} /&gt;
      &lt;Route path="/list1" component={List} /&gt;
      &lt;Route path="/list2" component={List2}/&gt;
  
  
  
    &lt;/Route&gt;
  );
  
  export default routes;
  </code></pre>
  
  <p><strong>List.js</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  import Article from './Article'
  require ('../src/sass/List.scss');
  import data from '../src/data/data'
  
  class List extends Component {
  
    render() {
  
  
      const listWebsites = data.map(websites =&gt; {
  
          return (
              &lt;Article key={websites.id} name={websites.name} preview={websites.description} image={websites.image} /&gt;
              )
      })
  
      console.log('our data is:', this.props.data)
      return (
        &lt;div className="wrapperList"&gt;
            {listWebsites}
  
          &lt;/div&gt;
      )
    }
  
  }
  
  export default List
  </code></pre>
  
  <p><strong>List2.js</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  import Article from './Article'
  require ('../src/sass/List.scss');
  import data from '../src/data/data2'
  
  class List extends Component {
  
    render() {
  
  
      const listWebsites = data.map(websites =&gt; {
  
          return (
              &lt;Article key={websites.id} name={websites.name} preview={websites.description} image={websites.image} /&gt;
              )
      })
  
      console.log('our data is:', this.props.data)
      return (
        &lt;div className="wrapperList"&gt;
            {listWebsites}
  
          &lt;/div&gt;
      )
    }
  
  }
  
  export default List
  </code></pre>
  
  <p><strong>Nav.js</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  import { Link } from 'react-router';
  import data from '../src/data/data'
  require ('../src/sass/Nav.scss');
  
  class Nav extends Component {
  
   render () {
      return (
      &lt;div&gt;
       &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;Link to="/list1" activeClassName="active"&gt;List1&lt;/Link&gt;&lt;/li&gt;
              &lt;li&gt;&lt;Link to="/list2" activeClassName="active"&gt;List2&lt;/Link&gt;&lt;/li&gt;
  
  
          &lt;/ul&gt;
       &lt;/nav&gt; 
       &lt;/div&gt;
      )
    }
  
  }
  
  export default Nav
  </code></pre>
  
  <p><strong>data.js (data2.js  same structure)</strong></p>
  
  <pre><code>const data = [
    {
      'id': '1',
       'name': 'Website1',
      'description': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr ',
      'image': 'website1.png',
  
    },
    {
      'id': '2',
      'name': 'Website2',
      'description': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr  ',
      'image': 'webstie2.jpg',
  
    },
    {
      'id': '3',
      'name': 'website3',
      'description': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr ',
      'image': 'website3.jpg',
  
    }
  
  export default data
  </code></pre>
  
  <p>Thanks for your help!</p>