Passing a JS object as a React props

Question

I am taking a React course and we are asked to pass a single JavaScript object as props to a React app. Below is my code:

import React from 'react';
import ReactDOM from 'react-dom';


const App = ( ) => {
    const course = {
        name: 'Half Stack application development',
        parts: [
            {
            name: 'Fundamentals of React',
            exercises: 10
            },
            {
            name: 'Using props to pass data',
            exercises: 7
            },
            {
            name: 'State of a component',
            exercises: 14
            }
        ]
    }
    const Header = ( ) => {
        return (
            <div>
                <h1>{course.name}</h1>
            </div>
        )
    }
    const Content = ( ) => {
        return (
            <div>
                <Part name={course.parts} exercises={course.parts} />
                <Part name={course.parts} exercises={course.parts} />
                <Part name={course.parts} exercises={course.parts} />
            </div>
        )
    }
    const Part = ( ) => {
        return (
            <div>
                <p>{course.parts} {course.parts}</p> 
            </div>
        )
    }
    const Total = () => {

        return (
            <div>
                <p>Number of exercises {course.parts + course.parts + course.parts}</p>
            </div>
        )
    }

    return (
        <div>
            <Header course={{course}} />
            <Content course={course} />
            <Total course={course} />
        </div>
    )
}


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

It is returning an error --> Objects are not valid as a React child.

I couldn't use this with the arrow function. I tried props but couldn't fix it. Please can someone help me to refactor and fix my code.

Answer 1

Try to use Props this way:

const App = ( ) => {
    const course = {
        name: 'Half Stack application development',
        parts: [
            {
            name: 'Fundamentals of React',
            exercises: 10
            },
            {
            name: 'Using props to pass data',
            exercises: 7
            },
            {
            name: 'State of a component',
            exercises: 14
            }
        ]
    }
    const Header = ({course}) => {
        return (
            <div>
                <h1>{course.name}</h1>
            </div>
        )
    }
    const Content = ({course}) => {
        //use parts.map(el => <Part part={el}) instead
        return (
            <div>
                <Part part={course.parts[0]} />
                <Part part={course.parts[1]}/>
            </div>
        )
    }
    const Part = ({part}) => {
        return (
            <div>
                <p>{part.name} {part.exercises}</p> 
            </div>
        )
    }
    const Total = ({course}) => {
        // dont forget to refactor counting exercises with reduce function or something prettier
        return (
            <div>
                <p>Number of exercises {course.parts[0].exercises + course.parts[1].exercises + course.parts[2].exercises}</p>
            </div>
        )
    }

    return (
        <div>
            <Header course={course} />
            <Content course={course} />
            <Total course={course} />
        </div>
    )
}

Also, you could have problem with

  <Header course={{course}} />

because you pass Object {course: {name: '...', parts: [...]}} as props, not {name: '..', parts: [..]}

Finally, you can move out your Header, Content, Total components from App component.

Answer 2

Here is a code that should work as desired: Code. Your course.parts is an array and that is one of the reasons why some errors occured. However, there were some more problems related to props and I would suggest reading React documentation.

You can also avoid hard-coded values in Content component by using map() function:

const Content = () => {
    return (
      <div>
        {course.parts.map(singlePart => {
          return <Part singlePart={singlePart} />;
        })}
      </div>
    );
  };

Many useful array functions are described here.