I have to get data from another file but as a variable, i'll declare data source in main file. Below is code for component and main file. The problem is in component file because declaring variable like that doesn't working.
Component code:
const Sylwetka = ({bg, dataSource}) => {
return (
<div>
<Navbar />
<div className={`h-[50vh] p-4 ${bg}`}>
{{dataSource}.map((data) => {
return (
<div>
<h1 className='text-5xl font-extrabold opacity-60'>{data.title}</h1>
</div>
);
})}
</div>
</div>
)
}
export default Sylwetka
Main app code:
const App = () => {
return (
<div className="lato text-white">
<BrowserRouter>
<Routes>
<Route path='/*' element={<Home />}/>
<Route path='/dahmer' element={<Sylwetka bg='dahmer-bg' dataSource={dahmerData}/>}/>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
CodePudding user response:
You have a syntax error, change "{dataSource}.map" to "dataSource.map".
Don't forget to declare your "dahmerData".
Give a feedback in comment and put your post to solved if the code below solves your problem.
Component code :
const Sylwetka = ({bg, dataSource}) => {
return (
<div>
<Navbar />
<div className={`h-[50vh] p-4 ${bg}`}>
{dataSource.map((data) => {
return (
<div>
<h1 className='text-5xl font-extrabold opacity-60'>{data.title}</h1>
</div>
);
})}
</div>
</div>
)
}
export default Sylwetka
Main app code :
const dahmerData = []; // your dataSource variable ...
const App = () => {
return (
<div className="lato text-white">
<BrowserRouter>
<Routes>
<Route path='/*' element={<Home />}/>
<Route path='/dahmer' element={<Sylwetka bg='dahmer-bg' dataSource={dahmerData}/>}/>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
CodePudding user response:
It looks like the issue in your component code is caused by the curly braces around dataSource. These curly braces are causing the dataSource variable to be treated as a JavaScript object literal, rather than a variable.
To fix this issue, you can simply remove the curly braces around dataSource:
const Sylwetka = ({bg, dataSource}) => {
return (
<div>
<Navbar />
<div className={`h-[50vh] p-4 ${bg}`}>
{dataSource.map((data) => {
return (
<div>
<h1 className='text-5xl font-extrabold opacity-60'>{data.title}</h1>
</div>
);
})}
</div>
</div>
)
}
export default Sylwetka
With this change, the dataSource variable will be correctly interpreted as a variable, and the map function will be able to iterate over its elements.