CODEWITHSUNDEEP
javascriptreactjsredux
recruintment
recruintment

Reputation: 95

How to do React-Table Dynamic Header?

I want to give a date to the titles in the columns, but I get an error when I try to subtract one day. I'd appreciate it if you could help.

     codes : 

          render(){
          const t = new Date();


          const t1 = new Date();
          t1.setDate(t1.getDate() - 1);


         columns = [{
          {Header:t},
          {Header:t1}
         }]

         return{ 
          <ReactTable
          Columns={columns}
          />
         }
       }

I want t1 to fall for 1 day no problem in the title of t shows today's date, but I do not show the t1 title I want a day deficiency and gives the following error.

{
Objects are not valid as a React child (found: Tue Apr 09 2019 12:19:07 GMT+0300 (GMT+03:00)). If you meant to render a collection of children, use an array instead.
    in div (created by ReactTable)
    in div (created by ThComponent)
    in ThComponent (created by ReactTable)
    in div (created by TrComponent)
    in TrComponent (created by ReactTable)
    in div (created by Thead)
    in Thead (created by ReactTable)
    in div (created by TableComponent)
    in TableComponent (created by ReactTable)
    in div (created by ReactTable)
    in ReactTable (at drivingHours.jsx:229)
    in div (created by Col)
    in Col (created by Context.Consumer)
    in ForwardRef(Bootstrap(Col)) (at drivingHours.jsx:228)
    in div (created by Row)
    in Row (created by Context.Consumer)
    in ForwardRef(Bootstrap(Row)) (at drivingHours.jsx:227)
    in div (created by Col)
    in Col (created by Context.Consumer)
    in ForwardRef(Bootstrap(Col)) (at drivingHours.jsx:226)
    in DrivingHours (created by Connect(DrivingHours))
    in Connect(DrivingHours) (at driverReports.jsx:42)
    in div (created by TabPane)
    in Transition (created by Fade)
    in Fade (created by TabPane)
    in TabPane (created by Context.Consumer)
    in ForwardRef(Bootstrap(TabPane)) (created by Context.Consumer)
    in ForwardRef(ContextTransform) (created by Tabs)
    in div (created by TabContent)
    in TabContent (created by Context.Consumer)
    in ForwardRef(Bootstrap(TabContent)) (created by Tabs)
    in TabContainer (created by Tabs)
    in Tabs (created by Uncontrolled(Tabs))
    in Uncontrolled(Tabs) (at src/index.js:127)
    in ForwardRef (at driverReports.jsx:27)
    in section (at driverReports.jsx:26)
    in ControlledTabs (created by Connect(ControlledTabs))
    in Connect(ControlledTabs) (created by Route)
    in Route (at app/index.js:48)
    in Switch (at app/index.js:41)
    in main (at app/index.js:40)
    in div (created by Row)
    in Row (created by Context.Consumer)
    in ForwardRef(Bootstrap(Row)) (at app/index.js:28)
    in div (created by Container)
    in Container (created by Context.Consumer)
    in ForwardRef(Bootstrap(Container)) (at app/index.js:27)
    in App (created by Connect(App))
    in Connect(App) (created by Route)
    in Route (created by withRouter(Connect(App)))
    in withRouter(Connect(App)) (at src/index.js:14)
    in div (at src/index.js:13)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Connect(ConnectedRouter))
    in Connect(ConnectedRouter) (at src/index.js:12)
    in Provider (at src/index.js:11)}
    ```

Upvotes: 1

Views: 2922

Answers (3)

recruintment
recruintment

Reputation: 95

I solved the problem :

codes : 

      render(){
      const t = new Date();


      const t1 = new Date();
      t1.setDate(t1.getDate() - 1);


     columns = [{
      {Header:t},
      {Header:t1.toISOString().split('T')[0]} /// format fixed, solved problem.
     }]

     return{ 
      <ReactTable
      Columns={columns}
      />
     }
   }

Upvotes: 1

Kracki
Kracki

Reputation: 63

Just warp your t1 in string template, like below

columns = [{
      {Header:t},
      {Header:`${t1}`}
     }]

     return{ 
      <ReactTable
      Columns={columns}
      />
     }
   }

Upvotes: 0

Uladzislau Ulasenka
Uladzislau Ulasenka

Reputation: 582

The problem is what your value is Object.

You should convert it to string.

For example, new Date().getTime() or new Date().toString() will be displayed.

Upvotes: 1

Related Questions