Custom 'No data' component with dynamic content in React Table

Question

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

Answer 1

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>
    );
  }
}