I'm a beginner writing a React app with currently three ponents minus the root App (yes this is for an online course). The first two don't really matter, but for the third one, named Total, I need to return a sum of the exercises count which are defined as three constants, exercises1~3.

I've been taught how to sum props, but only as {props + props1 + props2...}, and I could do it as well, but it would not be good as the number of parts and exercises grow. I could reduce the values or write a helper function, but React works kinda different and I'm kinda lost as to how I could provide a good scalable solution for this.

//first two ponents hidden

const Total = (props) => {
    return (
        <>
            <p>help here!!</p>
        </>
    )
}

const App = () => {
    const course = "Half Stack app development"
    const part1 = "Fundamentals of React"
    const exercises1 = 10 //this one
    const part2 = "Using props to pass data"
    const exercises2 = 7 //this one
    const part3 = "State of a ponent"
    const exercises3 = 14 //and this one

    return (
        <div>
            <Header name={course} />
            <Content name={part1} exercises={exercises1} />
            <Content name={part2} exercises={exercises2} />
            <Content name={part3} exercises={exercises3} />

            <Total exercises= help here!! />
        </div>
    )
}

I'm a beginner writing a React app with currently three ponents minus the root App (yes this is for an online course). The first two don't really matter, but for the third one, named Total, I need to return a sum of the exercises count which are defined as three constants, exercises1~3.

I've been taught how to sum props, but only as {props + props1 + props2...}, and I could do it as well, but it would not be good as the number of parts and exercises grow. I could reduce the values or write a helper function, but React works kinda different and I'm kinda lost as to how I could provide a good scalable solution for this.

//first two ponents hidden

const Total = (props) => {
    return (
        <>
            <p>help here!!</p>
        </>
    )
}

const App = () => {
    const course = "Half Stack app development"
    const part1 = "Fundamentals of React"
    const exercises1 = 10 //this one
    const part2 = "Using props to pass data"
    const exercises2 = 7 //this one
    const part3 = "State of a ponent"
    const exercises3 = 14 //and this one

    return (
        <div>
            <Header name={course} />
            <Content name={part1} exercises={exercises1} />
            <Content name={part2} exercises={exercises2} />
            <Content name={part3} exercises={exercises3} />

            <Total exercises= help here!! />
        </div>
    )
}

• javascript
• reactjs

• in your App ponent part1, part2, part3 are props ing in? Also exercises1, exercises2, exercises3 – Rikin Commented Aug 26, 2019 at 19:15
• Yes, course variable is used for props in Header ponent, parts are used for props in Content ponents. exercises1~3 are used for Content and Total. – mmlo95 Commented Aug 26, 2019 at 19:24
• 1 I meant are they ing in from other ponents using App ponent, or is this just an example that you are trying with. Anyway I have posted a custom solution assuming you have full access to your code's data structure – Rikin Commented Aug 26, 2019 at 19:25

4 Answers 4

You should structure your data as an array of objects.

 const exercises = [{ name: 'Fundamentals of React', exercise: 10 }, etc];

in render use

exercises.map(ex => <Content name={ex.name} exercises={ex.exercise}/>)

and for the sum use reduce https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Here's my solution assuming you control data structure in App ponent

const Total = (props) => {
    return (
        <>
            <p>props.totalExerciseCount</p>
        </>
    )
}

const App = () => {
    const course: {
      name: "Half Stack app development",
      parts: [
        {
          title: "Fundamentals of React"
          exerciseCount: 10
        },
        {
          title: "Using props to pass data"
          exerciseCount: 7
        },
        {
          title: "State of a ponent"
          exerciseCount: 14
        },
      ]
    }

  let totalExerciseCount = 0;

    return (
        <div>
            <Header name={course.name} />
            {course.parts.map(part => {
                totalExerciseCount += part.exerciseCount;
                return <Content name={part.title} exercises={part.exerciseCount} />
              })
            }

            <Total exercises={totalExerciseCount} />
        </div>
    )
}

You can create a Total ponent as a wrapper and count props of children:

const Total = (props) => {
    const { children } = props;
    const total = children.reduce((total, { props }) => total += props.exercises, 0);

    return (
        <>
            {children}
            <p>{total}</p>
        </>
    )
}
const App = () => {
    const course = "Half Stack app development"
    const part1 = "Fundamentals of React"
    const exercises1 = 10 //this one
    const part2 = "Using props to pass data"
    const exercises2 = 7 //this one
    const part3 = "State of a ponent"
    const exercises3 = 14 //and this one

    return (
        <div>
            <Header name={course} />
            <Total>
              <Content name={part1} exercises={exercises1} />
              <Content name={part2} exercises={exercises2} />
              <Content name={part3} exercises={exercises3} />
            </Total>
        </div>
    )
}
export default App;

const Total = (props) => {
    return (<p>{props.exercises}</p>)
}

and then

<Total exercises={exercises1 + exercises2 + exercises3} />