score:0
Accepted answer
to quickly make it work you could just do something like:
function mapstatetoprops(state) {
const employees = state.firestore.ordered.employees;
const schedules = employees
? employees.map(employee => ({
id: employee.id,
name: {
first: employee.name.first,
last: employee.name.last
},
schedule: [null, null, null, null, null, null, null]
}))
: undefined;
const rota = {
id: null,
date: moment(),
notes: null,
events: [null, null, null, null, null, null, null],
published: null,
body: schedules
};
return { rota }
}
then, in you component, you can check for schedules attribute of rota object and if it's still undefined, render something to indicate that data is not loaded yet.
still, putting such a complex logic into mapstatetoprops
is an antipattern for me. you can use selector pattern to make your code more organized.
score:0
your component should be reactive to the changes in the underlying data. so you can render something like this:
getschedules(emps) {
return emps.map(employee => <someemployeerenderingcomponent emp={employee} /> );
}
render() {
return (
<div>{this.getschedules(this.props.employees).bind(this)}</div>
)
}
and mapstatetoprops becomes:
function mapstatetoprops(state) {
const rota = {
id: null,
date: moment(),
notes: null,
events: [null, null, null, null, null, null, null],
published: null,
employees: state.firestore.ordered.employees
};
return rota
}
Source: stackoverflow.com
Related Query
- How to transform async data in mapStateToProps?
- How can I extract data from this returned object in an async function?
- How to snapshot-test a component that does async data loading using react-testing-library?
- How to make a react component with Async data re-usable in Redux flow?
- UseEffect hook does not work or how to display async data
- how to retrieve response data when unit testing async redux action
- React - How do I get fetched data outside of an async function?
- React how to render async data from api?
- How to render async data in react + firestore?
- How to get data back from reducer with a async action
- How can we get/rerender async data in ANT D Column
- How to fetch async data from Higher Order Components in React
- How to access useEffect's async data in another function within a component in React
- How to async fetch data in useEffect
- How to handle async data in ComponentDidUpdate?
- How to get data from an async function in React
- How can I pause a React-Autosuggest search until after async data is ready?
- How get async image data for react.js from firebase storage?
- How to interact with async data in render
- How to pass data from mapStateToProps to parent component?
- how can I use async data from node api?
- React - how to get async data from fetch POST
- React-Redux: How do I populate a component's prop on load with data from an async call?
- How can I receive the async data as the resolved value?
- how to get data from Async function, It will return "[object Promise]" instead of data
- how to use new set in react with a async Data in react
- How to transform file data in binary data in react?
- How to get data with async func?
- How to use data of an Async function inside a functional component to render HTML in React
- React Apollo - how to refetch (update) data after nodejs graphql backend returned async response
More Query from same tag
- Next.Js React app with styled components. Warning: Prop `className` did not match. Server: "x" Client: "y"
- React - Old promise overwrites new result
- Load static svg file in react and add dynamic styling
- How to change specific token style in code mirror editor?
- How can I map data from a firestore database in a useEffect hook
- Use props in HoC parameters
- How to implement auto logout functionality if a user logs out and then logs in before previous setTimeout ends?
- reactjs - jest snapshot testing nested redux "connected" components
- CryptoJS AES encrypt equivalent in Rails
- React.js - Implementing sorting of components
- Page-layout -> getPrintArea() in office-JS is returning blank Object
- DRYing html wrappers in javascript
- typescript: How to define type as any part of enum?
- Preload custom font with Next.js
- react prevent children render ( ajax loader waiting for response )
- Invariant failed: You should not use <Route> outside a <Router>
- React, passing state setter (useState) to child component with TypeScript
- How to access user profile in auth0
- React useState being ignored
- React-Redux: What is a appropriate initial state for a fetching flag?
- React Bootstrap Tabs Component's transition prop not working
- Confused with REDUX actions and reducers
- ANT Table with dropdown
- How to click unrendered virtualized element in TestCafe
- How to convert React JSX material ui elements to string
- React: how to load different api on different button click
- Problem with metronic react theme to typescript
- Warning: Received NaN for the `children` attribute. If this is expected, cast the value to a string. REACT problem
- While doing form validation on submit a form, the component is not updating in React
- React JS Adding Data to an Array through Functions