CODEWITHSUNDEEP
reactjs
Sydney Loteria
Sydney Loteria

Reputation: 10461

Getting undefined on state when accessing from child to parent - React

I have a problem where in I'm going to access a state inside a method inside my parent component from my child component it returns me an undefined value which i'm sure in the first place have a value of objects in an array.

Parent Component:

class BoardList extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            lists: []
        };
    }

    componentWillMount(){
        this.props.getBoardLists()
        .then((result) => {
            this.setState({
                lists: result
            });
        })
        .catch(error => {
            console.log(error);
        });
    }

    addBoardLists(result){
        // This is i'm getting my undefine state lists :(
        console.log(this.state.lists);
        this.setState({
            lists: this.state.lists.concat([result])
        });
    }

    render() {

        const { isLoading,data } = this.props;

        if(isLoading){
            return (
                <Loading />
            );
        }

        return (
            <div className={style.boardListContainer}>
                <h1 className={style.boardListTitle}>Personal Board</h1>
                <Row>
                    <BoardItem item={this.state.lists} />
                    <BoardAdd onDisplay={this.fetchBoardLists} onAddItem={this.addBoardLists} />
                </Row>
            </div>
        )
    }
}

Child Component:

class BoardAdd extends React.Component {

    constructor(props){
        super(props);

        this.state = {
            name: '',
            boardAddModalShow: false
        }

    }

    openAddBoardModal(){
        this.setState({ boardAddModalShow: true });

    }

    closeAddBoardModal(){
        this.setState({ boardAddModalShow: false });
        this.props.dispatch(reset('BoardAddModalForm'));
    }

    addBoard(formProps) {
        this.props.addBoard(formProps).then((result) => {
            // This is where I access my addOnItem from my parent component
            this.props.onAddItem(result);
            this.props.dispatch(reset('BoardAddModalForm'));
            this.closeAddBoardModal();
        })
        .catch(error => {
            console.log("error");
            console.log(error);
        });
    }
}

Upvotes: 1

Views: 1078

Answers (1)

q.Then
q.Then

Reputation: 2753

Perhaps this will help?

class BoardList extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            lists: []
        };
        this.addBoardList.bind(this)
    }

What is this magical .bind? You should read up on what this means in JavaScript (which it almost never thinks what you think it means). By default, ES6 constructors do not bind (for some crazy reason in my opinion), their own methods to their own this value. Thus, the this in your method is referring to a completely different this you are thinking of and consequentially, making this scenario quite bizarre.

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this

Upvotes: 2

Related Questions