score:0
this is untested, but something like this should work. loop over the month keys using object.keys
, then reduce each set of birthdays to a flat array:
render() {
return (
<div>
{object.keys(this.state.birthdays).reduce((birthdays, month) => {
return birthdays.concat(this.state.birthdays[month].map((bday) => {
return (
<p>{bday.name} - {bday.date}</p>
);
}));
}, [])}
</div>
);
}
score:1
try this:
{ object.keys(this.state.birthdays).map(this.renderbirthdays) }
and then above your render function create a function called renderbirthdays
like this:
renderbirthdays: function(key) {
return (
<div key={key} index={key} details={this.state.birthdays[key]}>
{details.name} - {details.date}
</div>
)
},
render: function() {
return (
<div>{ object.keys(this.state.birthdays).map(this.renderbirthdays) }</div>
)
}
so you can take advantage of javascripts map which will take your object and key them. then we're going to pass this key into a function called renderbirthdays
which will iterate over the item. we need to pass a key and an index into the element, and for ease of use, we can pass a details prop into it equal to the currently selected item it's iterating over. that way we can just use {details.name}
etc in the element.
Source: stackoverflow.com
Related Query
- React - How do i force child components to re render when parent state component changes?
- In React components implemented with hooks, how can the latest component state values be read from within setInterval?
- How do I render components within a state in react?
- How to render react components by using map and join?
- How to communicate UI state changes between React components with Redux?
- How to keep React components state after browser refresh
- How I can render react components without jsx format?
- How to update (re-render) the child components in React when the parent's state change?
- How to stop re render child component when any state changed in react js?
- How to test react components with mobx observable state
- How to render React components only once on startup?
- How to optimize React components with React.memo and useCallback when callbacks are changing state in the parent
- How does React re-use child components / keep the state of child components when re-rendering the parent component?
- React - How to return one of several components in the render function?
- How to synchronously render components with React (or render to string)
- How to transfer state between React components with hooks?
- React - How to render components inside a function outside of render plus execute same function outside of render?
- How to sync components sharing state hook in React
- How to use React + TypeScript to render components by looping through an array?
- React access state after render with functional components
- How to render components on the same page in react
- How to not change the state at the first render of React component?
- how do I render a page in react using functional components when onSubmit?
- Render different child components in React based on state
- How to refresh components when parent state changes in react when using react router
- How to render React Child Components from a function call?
- how can I know whether render reason is property changed or state changed in react hook function?
- How to pass down state and handlers in nested React components
- How to modify array within object in react component state
- How can I make react render the new state modifications after I have updated the state with hooks and context
More Query from same tag
- What's the name (type) of redux function 'connect(mapStateToProps)(ConnectedList)'
- Removing li items with Button onClick
- Semantic-UI-React, selection, multi, can't set defaultValue
- Upload multiple files/images, fetch, formData
- backgroundImage is not finding my url path
- How to call another method only after first method is completly done
- Where is the best place to put a value which is computed once by the initial passed-in parameter and never changed again, in ReactJS?
- App working with Reactjs Class but not working with functional react hook approach
- Uncaught Invariant Violation: Minified React error
- Context hook interfares with React Navigation routing
- React: How to get a group value of components?
- How can we add elements in antd based on jsx conditions with array index
- Load a component with Link, which then loads data based on selected item
- How to mock a React Component static method with Jest
- React & Material UI - How to Remove Nav Buttons/Links based on Routes?
- Material-UI component in React Router Link triggering the link
- How to hide layer when click outside in React.js?
- How to add custom font(ttf) to react.js application
- React Router very slow to redirect
- TypeError: Cannot read property 'disabled' of null in react-testing-library
- How to write clean, readable ReactJS Components with conditional renders?
- React 16.7 Hooks : `react.useState` is not a function
- Reactjs random colour picker - wow there must be an easier way?
- Filter array object with an other array
- typescript Cannot invoke an expression whose type lacks a call signature?
- Run React's useEffect at random intervals
- Send IP address from frontend using ReactJS to server NodeJS
- How to please TS compiler using conditional React JSX components
- How to render <select> tag without rendering the carat and label name
- React filter two arrays with if statement