score:2
i would split the logic between appropriate small components to improve readability and get closer to the first solid principle - single responsibility.
const data = {
'day 1': {
chest: {
warmup: ['parallel bar dips'],
main: ['bench press', 'inclined bench press', 'decline bench press'],
secondary: ['dumbbell flys', 'cable crossover flys', 'pec-deck fly'],
},
biceps: {
lola: ['barbell curl', 'preacher curl'],
bobo: ['hammer curls', 'cable curl', 'dumbbell curl'],
},
},
}
const program = ({ program }) => {
const days = object.entries(program)
return (
<section classname="program">
{days.map(([name, data], index) => (
<programday name={name} data={data} key={index} />
))}
</section>
)
}
const programday = ({ name, data }) => {
const parts = object.entries(data)
return (
<div classname="programday">
<h2>{name}</h2>
{parts.map(([name, data], index) => (
<programpart name={name} data={data} key={index} />
))}
</div>
)
}
const programpart = ({ name, data }) => {
const types = object.entries(data)
return (
<div classname="programpart">
<h2>{name}</h2>
{types.map(([name, exercises], index) => (
<programexercises name={name} exercises={exercises} key={index} />
))}
</div>
)
}
const programexercises = ({ name, exercises }) => {
return (
<div classname="programexercises">
<h5>{name}</h5>
<ul>
{exercises.map((name, index) => (
<li key={index}>{name}</li>
))}
</ul>
</div>
)
}
reactdom.render(<program program={data} />, document.getelementbyid('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
score:1
your approach can work, but it's very un-react-like. a far more react-like approach would leverage jsx much more heavily (and use logic inside jsx), and it would also use multiple components and return
instead of building arrays.
imagine instead ...
const main = () =>
object.entries(program).map(arrays =>
arrays.map((renderarr, index) =>
{index === 0
? <h2>{musclegroups}</h2>
: <musclegroups musclegroups={musclegroups} />
}
);
const musclegroups = ({ musclegroups }) =>
object.entries(musclegroups).map(([musclegroup, exercisegroups]) =>
<musclegroup musclegroup={musclegroup} exercisegroups={exercisegroups}/>
);
const musclegroup = ({ musclegroup, exercisegroups }) =>
<>
<h4>{musclegroup}</h4>
{object.entries(exercisegroups).map(([exercisecategory, exercisegroup]) =>
<excercisegroup category={exercisecategory} exercisegroup={exercisegroup}/>
)}
</>
const exercisegroup = ({ exercisecategory, exercisegroup }) =>
<>
<h5>{exercisecategory}</h5>
<ul>
{exercisegroup.map(exercise => <li>{exercise}</li>)}
</ul>
</>;
p.s. apologies if there are any typos in there (it's hard to refactor lots of code outside an editor). but even if there are some, hopefully you can see the overall idea i'm trying to convey.
you don't have to use as many components as i did (eg. you could combine musclegroups
and musclegroup
if you wanted). like anything in code, it's ultimately subjective as to what's the "best" way.
but in a larger sense, you should really have the same guiding principle as with regular javascript code. just as you wouldn't want one giant function that does everything in js (you'd want several smaller, focused functions), you likewise want to break your react logic into several focused components.
Source: stackoverflow.com
Related Query
- Best ways of rendering a nested JSON in react?
- React rendering nested json
- Rendering nested json data in react js
- React router best practices for nested navigation?
- What's the best alternative to update nested React state property with setState()?
- Rendering React components from json data dynamically
- React router nested routes. Not rendering child routes
- Rendering JSON API in react Using map method
- best place to fetch data before rendering in react
- Can't access nested JSON Objects in React
- Can't access nested object properties in a single object from JSON call in REACT
- Access nested JSON in React table
- How to get best practice React Redux nested array data?
- Nested Routes not rendering with React Router v4
- Nested routes in React Router v4 not rendering as expected
- React Router 4 Nested Routes not rendering
- React Hooks: Component is not rendering in Nested Routing
- What is the most efficient way of rendering a n-level nested object in React JS?
- React How to render nested dropdown list in a form from a json data?
- Rendering a nested navigation in React
- How to update the state of nested json object in react using hooks
- React - Nested maps to retrieve json data
- Nested JSON parsing in react
- Rendering optimization using nested state in React
- Nested Routes in React not rendering correctly with react-router v4
- JSON Parse nested objects in React
- Display/Map Nested JSON fields in React JavaScript
- React rendering JSON instead of component on page reload
- React nested route page not rendering properly as expected
- How to get nested Object from JSON File using React JS
More Query from same tag
- React Testing Library: How to find text in the document which is updated by setInterval?
- Why does this function need 'this' to be binded to it?
- Components with same import in micro-frondends
- .map is undefined before this.props.action executes
- append material ui snackbar to body
- React + vitejs + storybook setup
- how to read environment variables in next js (in azure app service)
- dynamically merging(override) 2 javascript objects
- Get props of function child component in tests with Enzyme
- Pass click event to nested component - React | Material-UI
- Uncaught SyntaxError: Unexpected token '<' and ChunkLoadError: Loading chunk 16 failed
- Getting the height of an imported component
- How to stop subscribing store updates?
- React front-end + Express.js Sessions
- Browser Cache Storage issue
- Is there a way of shallow render a react component that uses a react-apollo query
- React Native: How to select previous Text Input
- Why does my map-function break Swiperjs component in React?
- Accessibility - React Ensure click events have key events
- Transparent iFrame blocks mouse event when using react-scripts start
- Reactjs: How to make all row checkbox checked true when material table is loaded and deselect when clicked and vice versa?
- usage of promise with while loop results in freezing ui
- Firebase InfiniteScroll didnt run as expected
- Mysterious syntax onClick={::this.submit}
- Using class property to set initial state in React
- Could not get xml data in the response using fetch in react
- Submitting big forms with react.js
- Can Custom Icons Be Added to font-awesome-react
- Best practice for deleting related entities in normalized state in Redux
- ReactJS for loop only displaying the last value in firebase query