React's Context API Cosumer is not rendering Children - reactjs

Question

I'm implementing a Theme Switcher using the React Context API and this tutorial
https://www.youtube.com/watch?time_continue=1&v=oDgxUodLwGU
I've started by making the Context
export default React.createContext({
theme: dark
});
Then I have defined my themes (dark & light)
Then I created a Component (TodoList)
import React from 'react';
import styled from 'styled-components';
const List = styled.ul`
background: ${props => {
debugger;
props.theme.background;
}};
color: ${props => props.theme.color};
font-family: sans-serif;
font-size: 20px;
li {
line-height: 36px;
}
`;
const TodoList = () => {
debugger;
return (
<List>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</List>
);
};
export default TodoList;
Then in my App Component I used the code below
import React, {
Component
} from 'react';
import './App.css';
import TodoList from './components/TodoList';
import ThemeSwitcher from './components/ThemeSwitcher';
import * as themes from './styles/themes';
import ThemeContext from './styles/themes/context';
import { ThemeProvider } from 'styled-components';
class App extends Component {
state = {
theme: themes.dark,
};
toggleTheme = () => {
this.setState({ theme: this.state.theme === themes.dark ? themes.light : themes.dark });
};
render() {
console.log(this.state.theme);
return (
<div id="root">
<ThemeContext.Provider value={this.state}>
<ThemeSwitcher toggleTheme={this.toggleTheme} />
<ThemeContext.Consumer>
{theme => {
<ThemeProvider theme={theme}>
<TodoList />
</ThemeProvider>
}}
</ThemeContext.Consumer>
</ThemeContext.Provider>
</div>
);
}
}
export default App;
When I use TodoList component outside ThemeContext.Consumer, it renders just fine but inside it never renders. The breakpoints in the TodoList component never get hits...
Also I've tried disregarding the ThemeContext.Consumer and using the snippet below:
<ThemeProvider theme={theme}>
<TodoList />
</ThemeProvider>
the component rendered.
What possibly could I have done wrong?
Thanks in advance.

Answer 1

I was able to identify the problem, It was with the snippet below:
<ThemeContext.Consumer>
{theme => {
<ThemeProvider theme={theme}>
<TodoList />
</ThemeProvider>
}}
</ThemeContext.Consumer>
It should be
<ThemeContext.Consumer>
{theme => {
return (
<ThemeProvider theme={theme}>
<TodoList />
</ThemeProvider>
);
}}
</ThemeContext.Consumer>