React-table: Trouble adding a button to a react-table in every row

[dilipsundarraj1]

What version of React-Table are you using?

"react-table": "6.6.0"

What bug are you experiencing, or what feature are you proposing?

The below code is a subcomponent which receives a row object. The row object has three properties

• name
• number
• array

The requirement is to display three headers name ,number in the first two columns. Third one need to display the button. I have the code below but it does not work. I am definitely missing something here.

Button is getting displayed , but nothing is happening while clicking the button.

Any help would be much appreciated.

function submitClick(value){
  console.log(value);
  //write the further functionality
}

const subTableList = ({row}) => {
  return (
    <div style={{ padding: '20px' }}>
      <ReactTable
        data={row.tender_list}
        columns={[
          {
            expander: true,
            Header: 'Details',
            width: 65,
            Expander: ({ isExpanded, ...rest }) => (
              <div>
                {isExpanded ? <span>&#x2299;</span> : <span>&#x2295;</span>}
              </div>
            ),
            style: {
              cursor: 'pointer',
              fontSize: 25,
              padding: '0',
              textAlign: 'center',
              userSelect: 'none',
            },
          },
          {
            Header: 'Number',
            accessor: 'number',
            width: 165,
          },
          {
            Header: 'Time',
            accessor: 'time',
            width: 165,
          },
          {
            Header: 'Send Tender',
            width: 125,
            accessor: 'tender_list',
            style: {
              cursor: 'pointer',
            },
             Cell: props => <button onClick={submitClick(props.value)}>Click me </button>
          },
        ]}

Use https://codesandbox.io/s/X6npLXPRW (by clicking the "Fork" button) to reproduce the issue.

Then paste a link to your newly forked codesandbox here...

What are the steps to reproduce the issue?

1. list the steps
2. to reproduce
3. the issue

[gary-menzel]

You need to wrapp your function call in the onClick. The way it is written now, you are calling the actual function rather than passing the function name to call. If you need to pass the value, then you need to wrap it:...

onClick={()=>submitClick(props.value)}

This creates a function that calls your function.

This is not an issue with react-table and is better asked on the #react-table Slack channel or on Stack Overflow. There is a badge for Slack at the top of the react-table doco. Thanks.

[dilipsundarraj1]

Thank you so much for pointing that out gary ! Much appreciated!!

[nimbusLiQuid]

Yes, it's Stack Overflow :-D