javascript - TypeError: render is not a function Context Api Multiple Context

Question

I want to change the background of my web app dynamically so I want to use a context that includes a context. I am getting this error : TypeError: render is not a function. This is ThemeContext.js:

class BookList extends Component {
    render() {

        
        return (
            <ThemeContext.Consumer> {(contextTheme) => (
                <BookContext.Consumer>
                    {contextBook => {
                        
                        const {books} = contextBook;
                        const { isDarkTheme, dark, light } = contextTheme;
                        const theme = isDarkTheme ? dark : light;  
                        return (
                        ...
                        ...
                         )
                    }}
                </BookContext.Consumer>
            )}
            </ThemeContext.Consumer>
        
        )
    }
}
export default BookList;

question from:https://stackoverflow.com/questions/65884471/typeerror-render-is-not-a-function-context-api-multiple-context

Answer 1

If you want to use the render method you need to import component from react or access it using React.Component:

// import React
import React from 'react';

// create class as extension of React.Component
class BookList extends React.Component {
    render() {

        
        return (
            <ThemeContext.Consumer> {(contextTheme) => (
                <BookContext.Consumer>
                    {contextBook => {
                        
                        const {books} = contextBook;
                        const { isDarkTheme, dark, light } = contextTheme;
                        const theme = isDarkTheme ? dark : light;  
                        return (
                        ...
                        ...
                         )
                    }}
                </BookContext.Consumer>
            )}
            </ThemeContext.Consumer>
        
        )
    }
}
export default BookList;

As a side note I would recommend using functional components. You are not using in this component so it's best to use it as a function. Even when you want to use state in a functional component you can then use React Hooks.

Here it is as a functional component:

const BookList = () => {
return (
            <ThemeContext.Consumer> {(contextTheme) => (
                <BookContext.Consumer>
                    {contextBook => {

                        const {books} = contextBook;
                        const { isDarkTheme, dark, light } = contextTheme;
                        const theme = isDarkTheme ? dark : light;  
                        return (
                        ...
                        ...
                         )
                    }}
                </BookContext.Consumer>
            )}
            </ThemeContext.Consumer>

        )
}

export default BookList