How do I pass object from array within one component?

Question

Const App references two other components above it. At run time, it compiles successfully with no errors but I'm not getting the result I want.

Inside const App = () => {}, I have no problems rendering the Header tag within the return statement. In fact, it does what I want it to do which is to print "Half Stack application development" as a header in html.

The problem is with the Total tag underneath it. Underneath the header I want to render the number 342 as a paragraph tag onto the web page, but its not working.

Any help would be greatly appreciated to a newbie like me who just started learning React. Thank you :)

// Header takes care of rendering the name of the course.

const Header = (props) => { 
    return (
        <div>
            <h1>{props.course}</h1>        
        </div>
    )
}
// Total renders the total amount of exercises.

const Total = (props) => {
    return (
        <div>
            <p>Total number of exercises:{props.parts}</p>
        </div>
    )
}

// Header takes care of rendering the name of the course.

const App = () => {
    const course = {
        name: 'Half Stack application development' , 
        parts: [{name:'One' , exercises:342}]

      }

    return (
        <div>
            <Header course={course.name} />
            <Total parts={course.parts.exercises} /> 

            {/* 
            <Content parts={parts} />
            */}

        </div>
    )
} 

ReactDOM.render(<App />, document.getElementById('root'))

Todd Chaffee · Accepted Answer · 2019-08-31 23:07:03Z

3

This is not really a react problem but a problem with accessing the parts array:

Try:

<Total parts={course.parts[0].exercises} />

answered Aug 31, 2019 at 23:07

Todd Chaffee

6,82434 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I pass object from array within one component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related