2

This is my html file :

<!DOCTYPE html>
   <html>
     <head>
        <link rel="stylesheet" href="style/style.css">
     </head>
     <body>
        <button id="aa">another</button>
        <button id="eng">English</button>
        <div class="container"></div>
        <div class="containerAA"></div>
     </body>
     <script src="bundle.js"></script>
     <script src="index.js"></script>
     <script src="indexAr.js"></script>
</html>

i want to click on button (another) it give div with class container which is render functions from indexAr.js, and when click on button (English), it give div with class containerAA that is render data from index.js .

Mayank Shukla
  • 100,735
  • 18
  • 158
  • 142
flower
  • 989
  • 4
  • 16
  • 34

1 Answers1

0

I think the problem can be more easily solved when you make use of React router and keep a single index.js file. You need not to bundle the files separately.

You routes will be in index.js and will look like

import {Router, hashHistory, Route} from 'react-router'
ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App}>
        <Route path="another" component={Another}/>
        <Route path="english" component={English}/>
    </Route>
  </Router>, document.getElementById('app')
)

You App component will be something like

import {Link} from 'react-router';

class App extends React.Component {
    render() {
      return (
         <div>
             <button><Link to="another">Another</Link><button>
             <button><Link to="english">English</Link></button>    
             <div>{this.props.children}</div>         
         </div>
      )
   }

}

I think this is a better an more react style of approach for what you are trying to achieve.

You can follow the following youtube tutorial for setting up your react-router

Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400