Bonjour,
Je me tourne vers vous car, dans mon apprentissage de React.js, je me retrouve confronté à un problème.
Je cherche à faire remonter un état, puis, à le refaire redescendre en props dans le but de l'utiliser.
Voici le code du composant App.js :
import HomeCourses from './HomeCourses.js'
import Modules from './Modules.js'
import React,{useState} from 'react'
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
function App() {
const [getId, setGetId] = useState('');
return (
<Router>
<div className="App">
<Header />
<Switch>
<Route exact path='/'>
<HomeCourses getId={getId} setGitId={setGetId}/>
</Route>
<Route exact path="/Modules">
<Modules getId={getId} setGetId={setGetId}/>
</Route>
</Switch>
<Footer />
</div>
</Router>
);
}
export default App;
Puis voici le code du composant HomeCourses.js :
import React,{useState,useEffect} from 'react'
import Modules from './Modules.js'
function HomeCourses({ getId, setGetId }){
const [getList,setGetList] = useState([]);
const listCourses = getList.map((getList) =>
<Link to="Modules"><div className="courses" onClick={() => setGetId(getList.id)}>
<h2 key={getList.id}>{getList.name}</h2>
</div></Link>
);
return(
<div>
<h1 className='title_home_page'>Liste des Cours disponible :</h1>
<p>
</p>
<section className="bloc__content">
{listCourses}
</section>
</div>
)
}
export default HomeCourses;
(j'ai raccourci le code pour plus de lisibilité)
En cliquant sur l'élément div, je chercher donc à modifier l'état pour le faire redesendre.
Probléme, quand je clique dessus, cela m'affiche Type Error: setGetId is not a function.
Je viens vers vous car, je me suis pourtant inspiré d'un exemple et je ne comprends pas pourquoi cela ne fonctionne pas ici.
Merci d'avance pour vos réponses.