-1

Im new to react and in the application im working im using a class component Summary

   class SummaryList extends React.Component {
        //code for the summarylist component here
    }

   class Summary extends React.Component {
    render() {
     return (
      <Switch>
   
       <Route path="/apply" component={Advance} />
       <Route path="/summary/edit/:id" component={EAdvance} />
       <Route path="/summary" component={SummaryList} />
    
     </Switch>
);
}
 }
 export default Summary;

Im using this Summary in other page by importing it and using the component as Summary... Now the isssue here is i need to use the SummaryList present in Summary in other place....when im trying to import Summay again....its stopped displaying the first place tried with exporting SummaryList seperately below export default Summary...by putting as export {SummaryList} and tried importing it in the second place and in the first place used Summary only....but its not working

If i need to reuse the component what shoud i do...cant i import the same component two times in my application

sruthi_ys
  • 15
  • 5

1 Answers1

0

Yes you can export and import different components and render it multiple times.

Eg:-

App.js

import React, { Component } from 'react';
import Header from './Header';
import Main from './Main';

class App extends Component {
    render() {
        return (
            <div>
                <Header />
                <Main />
            </div>
        );
    }
}

export default App;

Header.js

import React, { Component } from 'react';
import Main from './Main';

class Header extends Component {
    render() {
        return (
            <header>
                <h1>Header Component</h1>
                <Main/>
            </header>
        );
    }
}

export default Header;

Main.js

import React, { Component } from 'react';

class Main extends Component {
    render() {
        return (
            <main>
                <p>Main Component</p>
            </main>
        );
    }
}

export default Main;

Here Main in rendered in App.js and Header.js

Vasanth Selvaraj
  • 79
  • 6
  • Hi....thanks for the reply....in my application when im importing the component in the second page its not working in the intial page....without even calling the component jst by mere import the component is not getting displayed ...there is no error...when i checked online it is said that it can lead to weird behaviour and we need tp use HOC tried that also but wasnt workng...so was wanting to know more about all this – sruthi_ys Jan 31 '23 at 15:46