CODEWITHSUNDEEP
javascriptreactjs
Dan
Dan

Reputation: 623

Passing children in react

this is my first time to develop a react application.

I wanted to display 5 buttons in a table. The first approach I did is to hardcode it in Table.js

Table.js

        <Button hidden={controlButton} onClick={() => reprocessConfirmation()}>
          Reprocess
        </Button>{" "}
        <Button hidden={controlButton} onClick={() => reprocessConfirmation()}>
          View Details
        </Button>
        <Button hidden={!controlButton} onClick={() => updateConfirmation()}>
          Update
        </Button>{" "}
        <Button hidden={!controlButton} onClick={() => deleteConfirmation()}>
          Delete
        </Button>{" "}
        <Button hidden={!controlButton} onClick={() => resequenceConfirmation()}>
          Resequence
        </Button>

But Table.js is designed to be reusable, so I was tasked to move these to index.js. I tried it by creating a var that has the function containing the buttons and return it to Table.js and display it using children props using this line {this.children}

index.js

const testButton = () => {
    return (
      <React.Fragment>
        <button>Test1</button>
        <button>Test2</button>
        <button>Test3</button>
        <button>Test4</button>
        <button>Test5</button>
      </React.Fragment>
    );
  };

  return (
    <React.Fragment>
      <MyTable
        {...{
          testButton
        }}
      />
    </React.Fragment>
  );
}

In Table.js I added

table.js


export default function MyTable({
  testButton,
  ...props
}) {

  return (
    <React.Fragment>
      <Table {...getTableProps()}>
        *****{props.children}
      </Table>
    </React.Fragment>

It seems that when I use this.children= it is undefined props.children= does not display anything

Thank you very much.

Upvotes: 0

Views: 65

Answers (1)

Meysam
Meysam

Reputation: 580

It seems like you didn't pass pageOptions prop to MyTable component as you render children based on it's length.

Upvotes: 1

Related Questions