score:2

Accepted answer

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.


Related Query

More Query from same tag