How to pass in a state to the doc property in firebaseConnect

Question

I am creating my first react app and I need to add a particular document with an id similar to the user id from my firestore collection to my app state. I am using redux-firestore. Is there a way I can pass in a variable (user_id) from the state to the firestoreConnect properties

I just started using React. So I don't even know where to start from

import React, { Component } from "react";
import { connect } from "react-redux";
import { firestoreConnect } from "react-redux-firebase";
import { compose } from "redux";

class BuyDataContent extends Component {
constructor(props) {
    super(props);
    this.state = {
    price: "300",
    check: false
    };
}

//handlechange
handleChange = e => {
    this.setState({
    [e.target.name]: e.target.value
    });
};
//This method handles a submit of the form
handleSubmit = e => {
    e.preventDefault();
    this.setState({ check: true });
};
render() {
    console.log(this.props);
    return (
    <div className="row">
        <div className="col-lg-10">
        <div className=" card card-white">
            <div className="card-header">
            <div className="panel panel-default text-center">
                <div className="panel-body">

                <form onSubmit={this.handleSubmit}>
                    <div className="form-group">
                    <label for="plan">Select Amount</label>
                    <select
                        name="price"
                        className="form-control form-control-lg"
                        onChange={this.handleChange}
                    >

                        <option value="1500"> 1500</option>
                    </select>
                    </div>

                    <input
                    type="submit"
                    className="btn btn-primary"
                    value="Buy"
                    />
                </form>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
    );
}
}

const mapStateToProps = state => {
console.log(state);
return {
    USERID:state.firebase.auth.uid
};
};
const mapDispatchToProps = dispatch => {
return {
    buyData: detail => dispatch(buyData(detail))
};
};
//export
```
export default compose( connect( mapStateToProps, mapDispatchToProps),     firestoreConnect([{ collection: "users", doc: USERID }]) 
)(BuyDataContent);
```

Any idea on how I can pass the userid for each user to the firestoreConnect "doc" property and get a specific document from the user's collection. The userid is present in my application state.

Michelle Fernández · Answer 1 · 2020-04-25T21:11:19.740

You can use useFirestoreConnect from within your component like this:

import { useFirestoreConnect } from 'react-redux-firebase';

class BuyDataContent extends Component {
    constructor(props);
    super(props);

    const { USERID } = props; // get user id coming from mapStateToProps 

    useFirestoreConnect([
        {
            collection: 'users',
            doc: USERID ,
            storeAs: 'user', // indicate the response to be stored in a "user" property inside props
        },
    ]);

    const { user } = props; // get firestore response from "user" property

    if (isEmpty(user)) {
        ... // check if the user is not loaded from firestore yet
    }

    // perform actions when user is loaded
   ...

Also remove the firestoreConnect from the compose.

This should work, check the docs out for reference: https://react-redux-firebase.com/docs/api/useFirestoreConnect.html#examples

Great! Now it looks much better :) – Tomerikoo Apr 26 '20 at 07:17 — Tomerikoo, Apr 26 '20 at 07:17

How to pass in a state to the doc property in firebaseConnect

1 Answers1