When calling a method in a react class component from a react functional component, is the state visible?

Question

I'm building a react application and I'm encountering the following problem:

I have a blog. The blog is implemented with a class component like this:

class Blog extends Component {

    constructor() {
        super();

        this.state = {
            blogPosts: [],
            newPost: {
                title: null,
                body: null
            },
            editPostId: null,
            accessToken: null,
            file: null,
            currentPagePosts: [],
            pageSize: 5
        };

        this.changeHandler = this.changeHandler.bind(this);
        this.submitHandler = this.submitHandler.bind(this);
        this.clearForm = this.clearForm.bind(this);
        this.readMoreClicked.bind(this);

        this.postTitleRef = React.createRef();
        this.postBodyRef = React.createRef();
        this.selectedFileRef = React.createRef();
    }
...
    readMoreClicked(postId) {
        const post = this.state.blogPosts.find(p => p.id === postId);
        post.collapsed = false;
        this.setState({blogPosts: this.state.blogPosts});
    }

    createTable() {
        return this.state.blogPosts.length
            ? <Table
                posts={this.state.currentPagePosts}
                isLoggedIn={!!this.state.accessToken}
                editPost={this.editPost}
                readMoreClicked={this.readMoreClicked} />
            : null;
    }
...
}

The component basically maintains a table of blog posts that looks like this:

The problem is the read more... links. In the code snippet above, I pass the handler for the read more link to the blog table in createTable(). The Table component is a functional component. It looks like this:

function Table(props) {
...
    return (
...
        <div className="read-more-link-container">
            <span className="read-more-link" onClick={() => props.readMoreClicked(id)}>
                Read more...
            </span>
        </div>
...
    )
}

When someone clicks the read more link, it calls the readMoreClicked() method in the blog component (also in the snippet above). But in the readMoreClicked() method, it tells me the state is not defined:

This makes me wonder if the state of the blog component won't necessarily come into scope just because you call a method within it from a functional component. <-- Is this the problem? Or is there something else going on?

Thanks.

From your console logs it looks like `this.state` is undefined. Where are you setting the state in your component? — Mark Skelton, Jan 05 '21 at 03:52
Hi Mark. I added the constructor where I initialize the state. Have another look. — gib65, Jan 06 '21 at 02:14

score 0 · Answer 1 · answered Jan 05 '21 at 03:55

0

Try adding a piece of code

super(props) {
   ....
   this.readMoreClicked.bind(this);
   ....
   this.state = {};
}

and define your state on super constructors

answered Jan 05 '21 at 03:55

cuongdevjs

711
6
15

I'm not sure I understand. The super class is the Component class which comes straight from the react library. I don't think I should be modifying that. Do I misunderstand you? – gib65 Jan 06 '21 at 02:17

score 0 · Answer 2 · answered Jan 06 '21 at 02:25

I implemented this hack to solve the problem, but it is a hack and I'm still hoping someone can offer a better solution:

First, I added a 'that' prop to the Table component:

    createTable() {
        return this.state.blogPosts.length
            ? <Table
                posts={this.state.currentPagePosts}
                isLoggedIn={!!this.state.accessToken}
                editPost={this.editPost}
                readMoreClicked={this.readMoreClicked}
                that={this} /> // <------------- HERE
            : null;
    }

Second, I pass prop.that to readMoreClicked() from the Table component like this:

<div className="read-more-link-container">
  <span className="read-more-link" onClick={() => props.readMoreClicked(id, props.that)}>
    Read more...
  </span>
</div>

This works. The blog component's state is now available in readMoreClicked() by referencing that.state.

But this is obviously a hack. Does anybody know a better solution?

When calling a method in a react class component from a react functional component, is the state visible?

2 Answers2