can't push React components to an array in another React component

Question

I'm trying to do something like accordion in ReactJs. Now I have 3 components: <TableList>,<TableListGroupRow>,<TableListRow>

In List render method I push GroupRows and Rows to an array, which is rendered then.

        //one group row for example
        var group;
        tableRows.push(
            group = 
            <TableListGroupRow
            onClick={this.toggleOpenGrp }  />
        );

        //one row for example
        var row;
        tableRows.push(
            row = 
            <TableListRow
            onClick={this.rowClick2 } />
        );

        group.children.push(row);



    return (
                <tbody>
                    {tableRows}
                </tbody>
    );

I'm trying to store links to rows into groupRow.children they belong to. By the idea I could listen to a click on a groupRow and set state to hidden for all Rows in its 'children' property.

But as I learned <TableListGroupRow> doesn't return an instance object with children array in it. Maybe it's totally incorrect concept. Please, let me know how such thing's made in react.
Thanks!

I now make an empty object in List render() method which is passed as a prop to both GroupRow and all of its Rows. In GroupRow render method I pass 'this' to this empty object. In Row render method I push every 'this' Row to this.props.thatEmptyObject.groupRow.state.children[] — Alexander Virko
– Alexander Virko, Commented Jul 20, 2016 at 9:00

Mchl · Accepted Answer · 2016-06-30 21:37:42Z

1

You definitely don't need to "store links"...

Also, you can push the components to an array without the assignment (because the assignment will return undefined).

I think a better approach might be store a 'display' boolean as part of the parent's state and conditionally load the children components based on this.state.display So in your example this would be: `

return (
        <tbody>
            {this.state.display ? tableRows : null}
        </tbody>
);

` (the event handlers will obviously need to be bound to some event.

Example:

toggleDisplay() {
    this.setState({
        display: !this.state.display
    });
 }

` and pass this event handler to the children through props

Lastly, I don't know if it helps but you can reduce this one level approach of trying to set the children's appearance from the parent's level by just passing the event handler (even through multiple levels).

Hope this helps!

edited Jun 30, 2016 at 21:37

Mchl

62.4k9 gold badges121 silver badges121 bronze badges

answered Jun 30, 2016 at 20:49

Patrick Pei

4475 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

can't push React components to an array in another React component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related