title: How to reuse variables defined in root component in another component?
body: <p>I am doing an exercise for Full stack open course and had to Refactor the Content component so that it does not render any names of parts or their number of exercises by itself. Instead it only renders three Part components of which each renders the name and number of exercises of one part. </p>
  
  <p>I can assign the same variables to Content but that increases the code.Any ideas?
  Thanks.</p>
  
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom'
  
  const Part = (props) =&gt; {
    return(
      &lt;p&gt;
        {props.part} {props.exercises}
      &lt;/p&gt;
    )
  }
  const Header = (props) =&gt; {
    return (
      &lt;h1&gt;{props.course}&lt;/h1&gt;
    )
  }
  
  const Content = () =&gt; {
    return(
      &lt;div&gt;
        &lt;Part part={part1} exercises={exercises1}/&gt;
        &lt;Part part={part2} exercises={exercises2}/&gt;
        &lt;Part part={part3} exercises={exercises3}/&gt;
      &lt;/div&gt;
    )
  }
  
  const Total = (props) =&gt; {
    return(
      &lt;p&gt;Number of exercises {props.exercises}&lt;/p&gt;
    )
  }
  
  const App = () =&gt; {
    const course = 'Half Stack application development'
    const part1 = 'Fundamentals of React'
    const exercises1 = 10
    const part2 = 'Using props to pass data'
    const exercises2 = 7
    const part3 = 'State of a component'
    const exercises3 = 14
  
    return (
      &lt;div&gt;
        &lt;Header course={course}/&gt;
        &lt;Content/&gt;
        &lt;Total exercises={exercises1+exercises2+exercises3}/&gt;
      &lt;/div&gt;
    )
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'))
  </code></pre>