Using a component to display array rows-CodePudding

Newbie hacking my way through. I'm trying to pull rows from an array and display them in a screen. I have the array populated and the snippet of code below works:

return (
        buildings.map((building) => {
          return <div className="col-md-9"> 
             {building.name}

But when I try to use a component in the statement I get an error. This doesn't work:

return (
        buildings.map((building) => {
          return <div className="col-md-9"> 
             <Building building={building.name}/>

The Building component is here:

import React from 'react'

function Building({building}) {
  return (
    <div className="row">
      <h1>{building.name}</h1>
    </div>
  )
}

export default Building

The error I get is here:

src/screens/Homescreen.js Line 34:15: 'Building' is not defined react/jsx-no-undef

I can provide more details if necessary. I think I'm missing something obvious but I'm stuck at the moment so any help is appreciated.

CodePudding user response：

First check to see if you are importing Building component. secondly, <Building building={building.name}/> you are passing down the name attribute of building and then in the Building component, trying to access that name attribute. This should be changed to <Building building={building}/>. Fix these to see if the problem continues to exist.