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;

Looks like too many curly braces. If dataSource is an array {dataSource.map(... is sufficient. — Andy
– Andy, Commented Dec 26, 2022 at 13:35
Which error you get and which data you have in dahmerData? Exisiting data or data from api call? — Daniel Agam
– Daniel Agam, Commented Dec 26, 2022 at 13:35

Tafita Raza · Accepted Answer · 2022-12-26 13:53:48Z

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;

Collectives™ on Stack Overflow

Getting data as variable in react component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related