Forum : Firebase & React

Bonjour ,
est ce que quelqu'un peut m'aider j'ai besoin de synchroniser une App react avec firebase j'ai créer le compte firbase et l'app firebase sur mon projet mais je ne saisa pas comment lier les deux pour lire et écrire les données j'ai regardé des tutos mais la plupart utilisent un composant <App> de classe moi j'utilise un composant de fonction .
Merci

3 réponses

popotte,

il y a 4 ans

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 :)

havikoro,

il y a 4 ans

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

havikoro,

il y a 4 ans

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