带有地图功能的 React 道具不起作用

Question

尝试测试我的功能并使用道具将“名称”中的项目呈现到页面上。查看了教程，不确定为什么没有显示？

这是我的代码：

import React from 'react'
const names =[
    {
        projectname: "Project 1",
        emoji: "happy",
    },
    {
        projectname: "Project 2",
        emoji: "sad",
    },
    {
        projectname: "Project 3",
        emoji: "angry",
    },
    {
        projectname: "Project 4",
        emoji: "confused",
    },
    {
        projectname: "Project 5",
        emoji: "wink",
    },
    {
        projectname: "Project 6",
        emoji: "smile",
    }

]

function cards(props){
    <>
    <h1>{props.projectname}</h1>
    <h2>{props.emoji}</h2>
    </>
}

function Projects(){
    return(
        <>
        <div className="projectsAll">
            <h1> This is a test</h1>
            {names.map((cards) => (
                <cards
                projectname={cards.projectname}
                emoji={cards.emoji}
                />
            ))
        }
        </div>
        </>
    )
}


export default Projects

这是我的 app.js 文件，它正确显示“这是一个测试”

import 'bootstrap/dist/css/bootstrap.min.css';
import Header from './pages/Header';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import Homepage from './pages/Homepage';
import Contact from './pages/Contact';
import About from './pages/AboutMe';
import Projects from './pages/Projects';


function App() {
  return (
    <Router>
         <Header /> 
         <Routes>
          <Route path="/" element={<Homepage />} />
          <Route path="/aboutme" element={<About />} />
          <Route path="/projects" element={<Projects />} />
          <Route path="/contactme" element={<Contact />} />
         </Routes>
    </Router>
    
  )
}

export default App;

我想将名称和表情符号投影到页面上，