CODEWITHSUNDEEP
javascriptreactjsjsx
JasonHsieh
JasonHsieh

Reputation: 591

How to arrange React child components order?

With react-semantic-ui, I made a searchable, paginationable Table React Component

working example: https://codesandbox.io/s/23q6vlywy

Usage

<PaginationTable
    items={[
      {
        id: 1,
        name: "test-item-1 ???"
      },
      {
        id: 2,
        name: "test-item-2"
      },
      {
        id: 3,
        name: "test-item-3"
      }
    ]}
    columnOption={[
      {
        header: "idHeader",
        cellValue: "id",
        onItemClick: item => {
          alert(item.id);
        },
        sortingField: "id"
      },
      {
        header: "Name~",
        cellValue: item =>
          `*custom text cannot be searched* property can item.name => ${
            item.name
          } `,
        onItemClick: item => {
          alert(item.name);
        },
        sortingField: "name"
      }
    ]}
    initSortingField={"id"}
    initSortingOrderAsc={false}
    pagination
    itemsPerPage={2}
    searchKeyProperties={["id", "name"]}
  />

But this component currently can only have a certain order 

 1.SearchBar on top
 2.Table on middle
 3.PaginationBar on bottom

And actually, I didn't write 3 child components in the Component, SearchBar, Table, PaginationBar

So it's hard for me to rewrite it to render props way to change the order such as below

<PaginationTable {...props}>
{({ SearchBar, Table, PaginationBar  })=>
<div>
     <SearchBar />
     <Table />
     <SearchBar />
    </PaginationTable>
</div>
</PaginationTable>

Because when I tried to change to render props, I first have to write 3 components independently, which means I have to change all variables under this( this.state, this.props, this.xxxFunction ) to something else.

For example:

In , I can use 

 <Input onChange={()=>{
     this.setState({ searchBarText: e.target.value });
 }}/>

But If I change it to 3 components, I have to rewrite it to something like

const SearchBar = ({onTextChange}) => <Input onChange= 
    {onTextChange}/>

<SearchBar onTextChange={()=>{
    this.setState({
        searchBarText: e.target.value
    });
}} />

Is there any way I can adjust child components order elegantly or is there any way I can write render props easier?

Updated @ 2018.10.27 17:36 +08:00

I modified <PaginationTable>'s render function as below but it will be lost mouse cursor focus when typing on <SearchInput>

render(){
const SearchBar = ()= (<Input onChange={()=>{...} />);
const TableElement = ()=>(<Table {...} > ... </Table>);
const PaginationBar = ()=>(<Menu {...} > ... </Menu>);
enter code here
return(
<React.Fragment>
    {this.props.children({ SearchBar,TableElement, PaginationBar })} 
</React.Fragment>)};

Then I found out, in this way, DOM will update every time when my state updated because every render will make a new component reference by const SearchBar = ()=>(...).

Thanks to @Ralph Najm

If I declare child component as below, DOM will not update every time.

render(){
    const SearchBar = (<input onChange={...} />);
    const TableElement = (<Table .../>);
    const PaginationBar = (<Menu .../>);
    //... same as above
}

In this way, I can change my component to render props in order to arrange the order very easily.

Thanks in advance.

Upvotes: 1

Views: 2281

Answers (1)

Ralph Najm
Ralph Najm

Reputation: 239

In the PaginationTable component change your render function and before the return statement, assign the elements to variables (SearchBar, Table, PaginationBar, etc...) then just reference those variables in the render function.

I modified your example here https://codesandbox.io/s/vy4799zp45

Upvotes: 2

Related Questions