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?
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