score:0
i think you have a bad project structure. i give you my example:
// react-create-app structure
src --|
|-- index.js
|-- firebaseconfig.js
|-- firebaseapp.js
|-- app.js
|-- examplecomponent.js
try it.
// src/index.js
import react from 'react';
import reactdom from 'react-dom';
import app from './app';
reactdom.render(
<react.strictmode>
<app />
</react.strictmode>,
document.getelementbyid('root'),
);
your firebase app info file
// src/firebaseconfig.js
const firebaseconfig: object = {
apikey: 'xxx',
authdomain: 'xxx.firebaseapp.com',
projectid: 'xxx-project',
storagebucket: 'xxx.appspot.com',
messagingsenderid: 'xxx',
appid: 'xxx',
// measurementid: 'xxx', // i don't enable google analytics for this project
};
export default firebaseconfig;
example a firebaseapp file
// src/firebaseapp.js
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/functions';
import 'firebase/auth';
import firebaseconfig from './firebaseconfig'; // your firebase app config
const app = firebase.initializeapp(firebaseconfig);
export default app;
next file is app.js
// src/app.js
import react from 'react';
import { firebaseappprovider } from 'reactfire';
import firebaseapp from './firebaseapp';
import examplecomponent from './examplecomponent';
const app = () => {
return (
<firebaseappprovider firebaseapp={firebaseapp}>
<examplecomponent />
</firebaseappprovider>
);
};
export default app;
component example code:
// src/examplecomponent.js
import react from 'react';
import { usefirestore } from 'reactfire';
const examplecomponent = () => {
const firestore = usefirestore();
console.log(firestore.collection('your_collection_name')); // working good
return <>hello reactfire app</>;
};
export default examplecomponent;
Source: stackoverflow.com
Related Query
- Objects are not valid as a React child. If you meant to render a collection of children, use an array instead
- Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead
- "Objects are not valid as a React child. If you meant to render a collection of children, use an array instead." error
- Image URL not showing on API Call Strapi v4 in single collection type
- Objects are not valid as a React child (found: object with keys {username}). If you meant to render a collection of children, use an array instead
- ReactJS rendering a collection of children throws "Invariant Violation: Objects are not valid as a React child" error
- Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead
- Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead
- Objects are not valid as a React child (found: object with keys {job}). If you meant to render a collection of children, use an array instead
- Objects are not valid as a React child (found: object with keys). If you meant to render a collection of children, use an array instead
- Objects are not valid as a React child (found: [object Element]). If you meant to render a collection of children, use an array instead.- ReactJs
- Firestore Timestamp get collection documents not equal to a particular date
- collection and onSnapshot not defined - React
- Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. ReactJS
- Objects are not valid as a React child (found: object with keys {totalItems}). If you meant to render a collection of children, use an array instead
- Objects are not valid as a React child (found: object with keys {arr}). If you meant to render a collection of children, use an array instead
- ReactJS Error: Objects are not valid as a React child. If you meant to render a collection of children, use an array instead
- Meteor does not display collection that exists in db
- ReactFire - get 'Objects are not valid as a React child' when binding Firebase to React state
- Objects are not valid as a React child. If you meant to render a collection of children, use an array instead. How to return it?
- Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead. JS
- react matrerial ui Error: Objects are not valid as a React child If you meant to render a collection of children, use an array instead
- Objects are not valid as a React child (found: object with keys {weight}). If you meant to render a collection of children, use an array instead
- ×Objects are not valid as a React child (found: object with keys {author, quote}). If you meant to render a collection of children, use an array
- Reactfire: useFirestore().collection is not a functon
- Why input data not getting added to firebase firestore collection
- With Firebase , using react hooks , objects are not valid as a React child , (If you meant) to render a collection of children, use an array instead
- Objects are not valid as a React child If you meant to render a collection of children, use an array instead
- React: Objects are not valid as a React child (found: object with keys. If you meant to render a collection of children, use an array instead
- Not able to show mongo collection using React
More Query from same tag
- Why am I getting match is not a function when it is clearly defined?
- React: how to use child FormItem components without getting Warning: validateDOMNesting: <form> cannot appear as a descendant of <form>
- How to @import CSS in a React App?
- How do you fetch a single item from mongodb and display it? (MERN)
- Error when using if, when updating the state in react
- Render components dynamically with react and typescript
- React is not keeping session data when I make requests
- onAuthStateChanged return undefined
- TypeError: Cannot read property 'name' of undefined [reactjs] with oracle database
- TypeError: Cannot set property 'reactRoot' of undefined
- In Reactjs, Close other items when one item is opened
- How can I update the values of Object.entries?
- Can't Create A UUID For Every Element Returned?
- How can I reuse a component with different props in React?
- How to create new array with conditionally adding an additional property comparing two arrays
- Getting illegal access error after upgrading the reactJS
- cannot read property 'purgeUnmountedComponents'
- react js - how to populate values based on another DOM element value
- Problems displaying new div when onMouseOver event fires
- React/Redux State is empty on second action call
- How do you indicate that a request is loading, and then change the UI once a request is finished, with React Hooks?
- Redux app state via url -> query param
- Get child component state in parent component
- Material UI Palette not updating
- How to execute a function on Redirect with React JS
- Tab navigation using conditional rendering
- Is there a Dropdown component which allows for a custom styled options on desktop, but native behavior on mobile?
- router props and custom props with typescript react router dom for functional components
- React jest test stops working when using [event.target.name]
- Filter antd Table With datePicker in react