React component with property won't load onto the App.js File

Question

A component that takes the data that is available in the App.js file, and displays the data. However the component is not showing up. When I use the inspect tool, the Content component is not showing in elements tab.There are no error messages being displayed on the console. I have exported the Content component, and imported it on the App.js file. Content.js

const Content = (props) => {
    <div>
        <p>{props.part1}{props.exercises1}</p>
        
    </div>
}

export default Content

App.js

import Header from './components/header'
import Content from './components/content'

function App() {
  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 (
    <div className="App">
      <Header course= {course}/>
      <Content part1 = {part1} exercises1 = {exercises1}/>
      <p>Number of exercises = {exercises1 + exercises2+ exercises3}</p>
    </div>
  );
}

export default App;

Answer 1

When you use multi line syntax with {}, you need to declare a return function, otherwise it returns nothing. This is the issue you were running into - happens all the time. You can either explicitly state a return or as i've done below, simply change the curly brackets to soft brackets.

const Content = (props) => (
  <div>
      <p>{props.part1}{props.exercises1}</p>
      <p>Hi</p>
  </div>
)

export default Content