Comment faire passer une fonction à travers un composant React pour le partage de données entre parent et enfant ?

Question

J'ai suivi ce tutoriel ( https://www.freecodecamp.org/news/pass-data-between-components-in-react/ ) du mieux que je peux, mais j'ai toujours des problèmes.

J'obtiens l'erreur suivante :

Uncaught TypeError: childToParent is not a function"

Voici la fonction parentale :

function App() {
const childToParent =(value) => {console.log(value)}
...
return (
...
  <SelectHours value={state.selectedHour} childToParent={childToParent}></SelectHours>
...
)

et la fonction enfant :

export default function SelectHours(selectedHours, childToParent) {
....
return (
<Select
  labelId="select-demo"
  id='select-demo'
  defaultValue=""
  //onChange={event => handleChange(event.target.value, true)}
  value={workHours[0] ? workHours[0] : ""}
>
  {
    workHours.map((value, index) => {
      return (
        <MenuItem
          value={value ? value : ""}
          key={index}
          onClick={() => childToParent(value)}
        >
          {value}
        </MenuItem>
      )
    })
  }
</Select>
)
....
}

Answer 1

Tu dois ajouter tes accolades pour que la réaction puisse dire que c'est un accessoire.

export default function SelectHours({selectedHours, childToParent}) {
....
return (
<Select
  labelId="select-demo"
  id='select-demo'
  defaultValue=""
  //onChange={event => handleChange(event.target.value, true)}
  value={workHours[0] ? workHours[0] : ""}
>
  {
    workHours.map((value, index) => {
      return (
        <MenuItem
          value={value ? value : ""}
          key={index}
          onClick={() => childToParent(value)}
        >
          {value}
        </MenuItem>
      )
    })
  }
</Select>
)
....
}

Answer 2

Doit détruire les accessoires comme ça.

export default function SelectHours({selectedHours, childToParent})

ou utiliser des props comme ceci

    export default function SelectHours(props)
      ...
    onClick={() => props.childToParent(value)}

Pour en savoir plus sur la déstructuration des objets, lisez cet article

https://dmitripavlutin.com/javascript-object-destructuring/

Answer 3

Vous devez avoir un gestionnaire pour ChildToParent à l'intérieur de

function App() {
...
const childToParent =(value) => {console.log(value)}
return (
...
  <SelectHours value={state.selectedHour} childToParent={childToParent}></SelectHours>
...
)

le composant App