Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expanded prop not overriding state on re-render? #480

Open
robwold opened this issue May 20, 2019 · 1 comment
Open

Expanded prop not overriding state on re-render? #480

robwold opened this issue May 20, 2019 · 1 comment

Comments

@robwold
Copy link

robwold commented May 20, 2019

I'm trying to use the Accordion to display a list of items, and when I click on an item to expand it the body is a form that allows the user to edit that item. Each form has a 'cancel edit' button that I want to collapse the expanded form.

From my console.log statements, it looks as if when I call my resetItemsState function, my component is getting re-rendered, and all items have the isActive field set to false, so I'd expect that the element collapses, but unfortunately it seems to be remaining expanded.

import {Accordion, AccordionItem} from 'react-sanfona';
import ItemForm from './item_form';
import Button from 'react-bootstrap/Button';
import { isEqual } from 'lodash';

class EditItem extends Component {
    constructor(props){
        super(props);
        this.state = {
            items: this.props.items.slice(0)
        };
        this.addItem = this.addItem.bind(this);
        this.resetItemsState = this.resetItemsState.bind(this);
    }

    addItem(){
        const { items } = this.state;
        items.push({
            id: -1,
            name: 'New Item',
            isActive: true
        });
        this.setState({ items });
    }

    componentDidUpdate(prevProps){
        if (!isEqual(prevProps,this.props)){
            this.resetItemsState();
        }
    }

    resetItemsState(){
        console.log('cancelling edit ...');
        let items =  this.props.items.slice(0);
        items.forEach(item => {item.isActive = false} );
        console.log(JSON.stringify(items));
        this.setState({ items });
    }


    describeItem(item){
        return (
            <h4>{ item.name }</h4>
        )
    }

    render(){
        console.log('rendering edit items...')
        const {items} = this.state;
        return (
            <div>
                <h2>Item Details</h2>
                <Accordion>
                    {

                        items.map((item) => {
                            console.log(`${item.name}: ${item.isActive}`);
                            return (
                                <AccordionItem key={`item-${item.id}`} title={this.describeItem(item)} expanded={ item.isActive }>
                                    <ItemForm item={item} handleCancel={this.resetItemsState}/>
                                </AccordionItem>
                            )
                        })
                    }
                </Accordion>
                <Button onClick={this.addItem}>New Item</Button>
            </div>
        );
    }
};

export default EditItems;

The relevant part of my ItemForm component is the button

<Button type="reset" onClick={this.props.handleCancel}>Cancel</Button>
@LukeVibes
Copy link

I am seeing similar issues, were you able to find a solution?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants