Getting data as variable in react component

Question

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;

Answer 1

• 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;