Firebase & React

Alors je ne suis pas assez habitué pour donner une solution directe (en plus perso j'utilise les class, et en plus j'ai laissé tomber React pour NextJS (C'esr React mais version framework) xD), mais dans les tutos qui utilisent les classes tu peux adapter la soluce pour ton code:

Par exemple quand le tuto utilise this.state, toi en haut de ta fonction tu fait [state, setState] = useState() un truc du genre et du coup tu peux faire un this.state et this.setState :)

Oui j'ai essayé [state, setState] = useState() mais malheureusement ça marche pas !
Merci en tout cas !

En fait j'ai trouvé la solution à l'aide de la doc Firbase et un peu de logique :

import React,{useState,useEffect} from 'react'
import Formulaire from './component/Formulaire'
import Message from './component/Message'
import {useParams} from 'react-router-dom'
import database from './Base'
import { getDatabase, ref, set,onValue } from "firebase/database";

function App() {

  const [state , setState] = useState({
    messages : {},
    pseudo : useParams().pseudo,
  })

  useEffect(()=>{
  const resultDb = ref(database);
  onValue(resultDb, (snapshot) => {
  const data = snapshot.val();
  if (data) {
    setState({messages : data.messages , pseudo : state.pseudo})
  } return 
});

  },[])

  function writeUserData(message) {
    set(ref(database), {
      messages :message

    });
  }

  const addMessage = (message) =>{
    state.messages[`message-${Date.now()}`] = message
    setState({pseudo : state.pseudo ,messages : state.messages})
    writeUserData(state.messages)
  }

  const msg = Object.keys(state.messages)
  const lastMessages = msg.map(key=>{
    return <Message key={key} pseudo={state.messages[key].pseudo} message = {state.messages[key].message} />
    })
  return (
    <div className="container-lg col-4 mt-5">
      <div>
        {lastMessages}
      </div>
      <Formulaire length={150} addMessage ={addMessage} pseudo={state.pseudo} />
    </div>
  )
}

export default App