score:1
Accepted answer
the reason you are not getting the value on state because when the usestate
is initialized, user
doesn't has a value, it's still loading. since state is initialized only once, when the data from firebase loads, state doesn't changes.
you need to use a useeffect hook to watch for change in user, and setusername
then.
const [user, loading, error] = usedocument(
firebase.firestore().collection("users").doc(uid),
{
snapshotlistenoptions: { includemetadatachanges: true },
}
);
const [username, setusername] = usestate('');
useeffect(() => {
if (user) {
setusername(user.data().username);
}
}, [user])
return (
<div classname="flex">
<div classname="w-1/2">
{user && (
<div classname="p-8">
<div>{user.data().username}</div>
<div>{username}</div>
</div>
)}
</div>
<div classname="w-1/2">box 2</div>
</div>
);
this should work, if you face any issues, leave a comment.
Source: stackoverflow.com
Related Query
- React hooks value is not accessible in event listener function
- React - < Input> value is not getting updated on onChange event
- Getting 404-Page Not Found error, when i reload my react application which is on firebase
- Input type text's value not getting updated while using React JS
- Method not getting correct useState value despite updating state in React
- Change of state is not getting affected in another unmount useEffect in react hooks
- React - ComponentDidMount not getting value from Redux state
- React Hooks and Redux - trouble getting value from action creator
- select option from dropdown using API and get that selected value but i am getting last value which i have not selected in react
- React Hooks Wrapper not getting updated after state change in useEffect
- Getting setState is not defined no-undef error using React hooks
- why I am not getting updated props value in react
- Value not getting passed from child to parent component in React
- Input element's value in react component is not getting re-rendered when the state changes
- React Hooks Firebase - useEffect hook not returning any data
- React Hooks in combination with Firebase data not showing on page load
- react hooks not setting the select value after fetching options
- React hooks with multiple state values not working but separate state value works
- React hooks dependencies, including it creates an infinite loop, not including it doesn't give me the latest value
- React Checkbox not getting value onCheck
- React input value is not getting updated although value next to it with same variable is
- Why are my react hooks not getting called?
- react hooks component not get new props value
- Default value is not selected with react-select (4.3.1) using React Hooks
- In react on first time data is getting fetched, when user move to chat with one another user, state value is not getting change
- 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
- Input onChanged value not set in React Hooks
- Passing a function as a callback to a React state created with hooks did not reflect new value of variable
- not getting updated state value in react using hooks?
- Getting data from Firebase not displaying with React JS?
More Query from same tag
- React - state property is undefined - Why?
- React component not re-rendering on state change
- Avoid magic strings when working with Chakra Ui
- How to style react-select component
- Pass setState as a parameter Typescript
- NextJs build fails, while development server runs fine
- how to solve this Cannot POST error in MERN?
- having controlled and uncontrolled input fields in the same component is prevent the submission of form
- TableCell Texts inside Card Is Overflowing in React
- How do I change the background color of a selected react-bootstrap ToggleButton?
- Declared const variable not visible in useEffect
- How do I disable a button based on multiple states in React?
- react-syntax-highlighter new line in Clojure code sample
- How to refresh in React Navigation
- Is useRef Hook a must to set and clear intervals in React?
- How can I access the history instance outside of React app with React Router v4?
- ReactJS Fetch Called Once But Multiple Requests Go Out
- Error: Material-UI: The data grid component requires all rows to have a unique id property. A row was provided without id in the rows prop:
- Render multiple components by ReactDOM
- React setState doesn't work with array.prototype.splice
- Adding a className on scroll?
- particles.js not showing up in reactjs project
- Don't show component if the width is too narrow
- How to conditionally add or not onClick on a div in react?
- Export beforeAll and afterAll in JEST
- React component module (imported from local repo) causes error "Hooks can only be called inside of the body of a function component."
- Fire event listener on element not rendered in React
- CRUD in React with Firestore for data in an array
- useEffect keeps fetching data and re-rendering the component
- React get codemirror value onClick