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.

2 réponses


Humm la comme ça je vois rien qui ferait que ça ne fonctionne pas si ce n'est que tu nomme dans Homecourses ton array et ton item de la meme manière

const listCourses = **getList**.map((**getList**) =>
  <Link to="Modules"><div className="courses" onClick={() => setGetId(getList.id)}>
  <h2 key={getList.id}>{getList.name}</h2>
  </div></Link>

);

Peut être que ca lui pose souci, apres la comme ça j'imagine que getList contient des choses, parce que sinon tu renvoies pas grand chose

Essaie de passer une fonction voir si tu as le meme comportement, exemple dans App.js

const handleClick = useCallback((id) => {
    setGetId(id)
},[id])

<Switch>
    <Route exact path='/'>
      <HomeCourses getId={getId} handleClick={handleClick}/>
    </Route>
    <Route exact path="/Modules">
      <Modules getId={getId} handleClick={handleClick}/>
     </Route>
</Switch>

Et dans HomeCourses.js

function HomeCourses({ getId, handleClick }){
    const [**getLists**,**setGetLists**] = useState([]);

    const listCourses = **getLists**.map((getList) =>
      <Link to="Modules"> // TA KEY DOIS ALLER LA key={getList.id}
            <div className="courses" onClick={() => handleClick(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>
    )
}
Guigzz
Auteur

Bonjour,

Merci beaucoup pour t'as réponse, cette solution fonctionne parfaitement.

Encore Merci et bonne continuation.