CODEWITHSUNDEEP
javascriptreactjs
mmlo95
mmlo95

Reputation: 65

How to sum React component values

I'm a beginner writing a React app with currently three components 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 components 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 component"
    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>
    )
}

Upvotes: 2

Views: 6439

Answers (4)

Denys Kozak
Denys Kozak

Reputation: 547

You can create a Total component 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 component"
    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;

Upvotes: 0

Rikin
Rikin

Reputation: 5473

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

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 component"
          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>
    )
}

Upvotes: 2

robi932
robi932

Reputation: 169

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.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Upvotes: 2

David Ko
David Ko

Reputation: 342

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

and then 

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

Upvotes: -1

Related Questions