3

I've got a react table and I want to create a custom 'no data' component, so I have set it up as follows

<ReactTable
  data={data}
  columns={columns}
  NoDataComponent={NoData}
/>

{NoData} is a React component I have build - I import this in to react at the top of the page, this works great.

But now I had to add a dynamic title to the component, usually if I wanted to add this component to the render method I would add it as such

<NoData
  noDataTitle="This is the dynamic title"
/>

I don't think there is a way to add a React Component with variables to the 'NoDataComponent' variable on ReactTable so I created a const which does this for me and ended up with something like this

import NoData from '../page/NoData';

class Parent extends React.Component {

const noDataConst = (
    <NoData
      noDataTitle="This is the dynamic title"
    />
  )

return (
  <div>
    <ReactTable
      data={data}
      columns={columns}
      NoDataComponent={noDataConst}
    />
  </div>
)

But this still isn't working, have I gone about this the wrong way? Can someone point out where I've gone wrong or direct me to some documentation that would be amazing

Neil Kelsey
  • 811
  • 4
  • 13
  • 31

1 Answers1

4

Instead of having noDataConst as a variable, you can create a new function component that you use for the NoDataComponent prop.

const NoDataConst = props => (
  <NoData noDataTitle="This is the dynamic title" {...props} />
);

class Parent extends React.Component {
  render() {
    return (
      <div>
        <ReactTable
          data={data}
          columns={columns}
          NoDataComponent={NoDataConst}
        />
      </div>
    );
  }
}
Tholle
  • 108,070
  • 19
  • 198
  • 189
  • 1
    That's done the trick - fantastic! .. I don't understand the {...props}, is that easily explained or somewhere I can read up on that? I'll accept this as an answer in 6 minutes when the system lets me – Neil Kelsey Apr 16 '19 at 15:43
  • 1
    @NeilKelsey Great! It's called [spread syntax and it's explained in this answer](https://stackoverflow.com/questions/28452358/what-is-the-meaning-of-this-props-in-reactjs). – Tholle Apr 16 '19 at 15:44