I'm importing a datalist (array of objects) from a file. I think i am right to import it into the App.js file and then working with props. I would like to map through it in my Card.js components which will then be imported to the Overviewpage.js file to display the cards when redirecting to this page. Unfortunately i am getting the error from the title in chrome and nothing gets displayed. Or I can't really map through the list even when trying to console.log it.

first the App.js file

import './App.css';
import {BrowserRouter, Routes, Route} from "react-router-dom";  

// pages
import Homepage from './pages/Homepage';
import Aboutpage from "./pages/Aboutpage";
import Overviewpage from "./pages/Overviewpage";
import datalist from "./pages/datalist";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/home">
          <Route index element={<Homepage />}></Route>
        </Route>
        <Route path="/about" element={<Aboutpage/>}/>
        <Route path="/overview" element={<Overviewpage details={datalist} />}/>
      </Routes>
    </BrowserRouter>
  );
}

export default App;
```
second the Overviewpage.js file
```
import React from 'react';
import Card from "../components/Card";
import Footer from '../components/Footer';
import Navigation from '../components/Navigation';



function Overview() {

    return (
        <div>
            <Card />
        </div>
    )
}

export default Overview
```

third the datalist
```
const datalist = [
    {
        id:1,
        name:"Digitec",
        description:"grösster schweizer Onlineshop im Bereich E-commerce",
        logo:"",
        website: "",
    },
    {
        id:2,
        name:"Galaxus",
        description:"grösster schweizer Onlineshop für Waren des täglichen Bedarfs",
        logo:"",
        website: "",
    }
]
```

and last the Card.js file (it is not finished, just for demonstration)
```
import React from 'react'

function Card({details}) {

    const cards = details.map((item, id) => {
        console.log(item)

        return (
            <div key={id}>
                <h2>{item.name}</h2>
            </div>
        )
    })

    return (
        {cards}
    )
}

export default Card

```

CodePudding user response：

i think the problem here is that your giving a datalist to overviewpage and not passing it again to the component, instead try to change it like this:

function Overview({details}) {

    return (
        <div>
            <Card details={details}/>
        </div>
    )
}
    
    export default Overview
    function Card({details}){
        return (
         details.map((item)=>{
            <div key={item.id}>
                <h2>{item.name}</h2>
            </div>
 }) 

) }

CodePudding user response：

Several things are wrong. You forgot to pass the details props in your Overview component. It should be

import React from 'react';
import Card from "../components/Card";

function Overview({details}) {

    return (
        <div>
            <Card details={details} />
        </div>
    )
}

export default Overview;

or this:

import React from 'react';
import Card from "../components/Card";
import datalist from "./datalist"
function Overview() {

    return (
        <div>
            <Card details={datalist} />
        </div>
    )
}

export default Overview;

Next, in your datalist.js file you have to export your variable in order to import it and use it in another file.

const datalist = [
    {
        id:1,
        name:"Digitec",
        description:"grösster schweizer Onlineshop im Bereich E-commerce",
        logo:"",
        website: "",
    },
    {
        id:2,
        name:"Galaxus",
        description:"grösster schweizer Onlineshop für Waren des täglichen Bedarfs",
        logo:"",
        website: "",
    }
];

export default datalist;

Last thing, in my personnal opinion you should not import your external files in app when you don't need to. For example with the datalist, there's no operations with it in the Overview component so you should import it directly in the Overview component instead of passing it as a prop (it will make your code cleaner and easier to fix in the feature).