Uncaught TypeError: inputs.map is not a function-CodePudding

I'm building a form for admin dashboard with ReactJs. I created a data arrays for form input of users and products, stored in (formSource.js). Also, in App.js that works with react-router-dom V6, i added a title and inputs as props for each users and products. I'm getting this error in console.dev:

Uncaught TypeError: inputs.map is not a function

import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
import New from "./pages/new/New"
import { productInputs, userInputs } from "./formSource";
//...
return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" >
            <Route path="users" >
              <Route path="new" element={<New inputs={userInputs} title="Add New User" />} />
            </Route>
            <Route path="products" >
              <Route path="new" element={<New inputs={productInputs} title="Add New Product" />} />
            </Route>
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  );

New.jsx:

//...
const New = (inputs, title) => {
  return (
    <div className="New">
      <Sidebar />
      <div className="newContainer">
        <Navbar />
        <div className="top">
          <h1>{title}</h1>
        </div>
        <div className="bottom">
          <div className="left">
            <img
              src="https://icon-library.com/images/no-image-icon/no-image-icon-0.jpg"
              alt="no avatar icon"
            />
          </div>
          <div className="right">
            <form>
              <div className="formInput">       //Error occurred here
                <label htmlFor="file">
                  Image: <DriveFolderUploadOutlinedIcon className="icon" />
                </label>
                <input type="file" id="file" style={{ display: "none" }} />
              </div>
              {inputs.map((input) => (
                <div className="formInput" key={input.id}>
                  <label>{input.label} </label>
                  <input type={input.type} placeholder={input.placeholder} />
                </div>
              ))}
              <button>Add</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default New;

This is a part of formSource.js code:

export const userInputs = [
    {
        id: 1,
        label: "Username",
        type: "text",
        placeholder: "john_doe",
    },
    {
        id: 2,
        label: "Name and surname",
        type: "text",
        placeholder: "John Doe",
    },
];

export const productInputs = [
    {
        id: 1,
        label: "Title",
        type: "text",
        placeholder: "Apple Macbook Pro",
    },
    {
        id: 2,
        label: "Description",
        type: "text",
        placeholder: "Description",
    },

CodePudding user response：

The props are an object, not a parameter list.

const New = (inputs, title) => {

into

const New = ({inputs, title}) => {

const New = (props) => {

// props.inputs