How to remake and export/import function in React?

Question

I need that useEffect in another component (not in a component directly connected to App.js). How can I remake and put it into a separate file? Will it better be a custom function to a custom hook? This is App.js component:

import React, {useState, useEffect} from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import axios from 'axios';
import Competitions from './components/Competitions';
import CompetitionForm from './components/CompetitionForm';
import Navigation from './components/Navigation';
import './styles/App.css'
 
const App = () => {
  const [competitions, setCompetitions] = useState([]);
  const [defaultCompetitionValue, setDefaultCompetitionValue] = useState({})

  useEffect(() => {
    axios.get('http://localhost:4000/app/getCompetitions')
      .then(res => res.data)
      .then(res => {
        for(let i = 0; i < res.length; i++) {
          competitions[i] = {
            "value": res[i].name,
            "label": res[i].name,
            "id": res[i]._id
          }
        };
        setCompetitions(competitions);
      })
      .then(() => setDefaultCompetitionValue({"value": competitions[0].value, "label": competitions[0].value}))
  }, [competitions]);

  if(competitions.length > 0 && defaultCompetitionValue) {
    return (
      <div className = "container">
        <Router>
          <div className = "sidebar">
            <Navigation />
          </div>
          <div className = "content">
            <Switch>
              <Route exact path = "/homepage">
                <Competitions
                  competitions = {competitions}
                  defaultCompetitionValue = {defaultCompetitionValue}
                />
              </Route>
              <Route exact path = "/CompetitionForm">
                <CompetitionForm competitions = {competitions}/>
              </Route>
            </Switch>
          </div>
        </Router>
      </div>
    )
  }
  return (<></>)
};

export default App;

I need that useEffect in another component (not directly connected to App.js). How can I remake and put it into a separate file? Will it better be a custom function to a custom hook?

Roopa Rauniyar · Accepted Answer · 2021-10-08 05:10:04Z

1

useEffect is a hook which React provides for functional components. And you can use that in any component by importing from react as follows. You need not to pass from one component to another.

import { useEffect } from 'react';

For more details you can read their official docs here on hooks. https://reactjs.org/docs/hooks-reference.html

edited Oct 8, 2021 at 5:10

answered Oct 7, 2021 at 16:26

Roopa Rauniyar

1311 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to remake and export/import function in React?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related