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;

This is BookList.js so it is a component.

 class ThemeContextProvider extends React.Component { state = { isDarkTheme: true, dark: { bg: '#d2f3df', txt: '#0f0f0f', hover: '#f0f0f0ca'}, light: {bg: '#288888', txt: '#f0f0f0', hover: '#f0f0f0ca'} } render() { return ( <ThemeContext.Provider value={{...this.state}}> {this.props.children} </ThemeContext.Provider> ) } } export default ThemeContextProvider;

This is the child context(BookContext):

 import React from 'react'; export const BookContext = React.createContext(); class BookContextProvider extends React.Component { state = {... ... } render() { return ( <BookContext.Provider value= {this.state}> {this.props.children} </BookContext.Provider> ) } } export default BookContextProvider;

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