const App = () => {
    const courses = [
      {
        name: 'Half Stack application development',
        id: 1,
        parts: [
          {
            name: 'Fundamentals of React',
            exercises: 10,
            id: 1
          },
          {
            name: 'Using props to pass data',
            exercises: 7,
            id: 2
          },
          {
            name: 'State of a component',
            exercises: 14,
            id: 3
          },
          {
            name: 'Redux',
            exercises: 11,
            id: 4
          }
        ]
      },
      {
        name: 'Node.js',
        id: 2,
        parts: [
          {
            name: 'Routing',
            exercises: 3,
            id: 1
          },
          {
            name: 'Middlewares',
            exercises: 7,
            id: 2
          }
        ]
      }
    ]
    const Fam = ({ fam }) => {
      return (
        <li>{fam.name}</li>
      )
    }
    const Apps2 = ({ courses }) => {
      const rows2 = () => courses.map(course =>
        <Fam key={course.id} name={name}/> )
        return (
          <div>
            <h1> Notes</h1>
            <ul> {rows2()} </ul>
          </div>
        )
    }
    const result = courses.map(course => course.id)
    const rows = courses.map(course =>
    <li key={course.id}> {course.name} </li>
    )
    return (
      <div>
        {result}{rows}
      </div>
    )
  }
ReactDOM.render(<Apps2 />,
document.getElementById('root'))