Merhaba, bir arkadaş react öğrenmeye çalışıyor. Aşağıdaki videoda olduğu gibi karanlık ve aydınlık tema yapmak istiyor. Varsayılan olarak aydınlık tema geliyor. Sorunumuz şu;

Butona ilk tıklandığında karanlık tema geliyor ancak buton tekrar çalışmaz hale geliyor. Yani sürekli tıklayarak karanlık aydınlık arasında geçiş yapamıyoruz, tek sefer çalışıyor ve öylece kalıyor.


https://www.youtube.com/watch?v=U8mP...YXeOrd&index=6

BookList

import React, { Component } from 'react'
import './BookList.css'
import Book from './Book'
import { BookContext } from '../contexts/BookContext'     // Default almadığımız için {} kullandık
import { ThemeContext } from '../contexts/ThemeContext'

class BookList extends Component {
    render() {
        return (
            <ThemeContext.Consumer>
                {(contextTheme) => (    // ThemeContext.Provider dan gelen value yu buraya gönderdik. Burada contextTheme ile o verileri kullanıyoruz
                    <BookContext.Consumer>
                        {contextBook => {
                            const { books } = contextBook;  // BookContext.Provider dan gelen value yu buraya gönderdik.
                            const { changeTheme, isDarkTheme, dark, light } = contextTheme;  /* Destructing kullandık burada */
                            const theme = isDarkTheme ? dark : light;      // Sorun burada sanırım

                            return (
                                <section className="page-section" style={{ background: theme.bg, color: theme.txt }} id="portfolio">
                                    <div className="container">
                                        <div className="text-center">
                                            <h2 className="section-heading text-uppercase">Bookfolio</h2>
                                            <h3 className="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
                                            <button type="button" className="btn btn-sm btn-info" style={{ marginTop: "-70px" }}
                                                onClick={changeTheme} >Change Theme</button>
                                        </div>
                                        <div className="row">
                                            {books.map((book, i) => {    // i parametresi key için
                                                return (<Book   // map ile her book için Book component oluşturduk
                                                    book={book}
                                                    key={i}
                                                />
                                                )
                                            })}
                                        </div>
                                    </div>
                                </section>
                            )
                        }}
                    </BookContext.Consumer>
                )}
            </ThemeContext.Consumer>
        )
    }
}

export default BookList;

ThemeContext

import React, { Component } from 'react'

export const ThemeContext = React.createContext();

class ThemeContextProvider extends Component {
    state = {
        isDarkTheme: false,
        dark: { bg: '#222529', txt: '#D65F5F', hover: 'rgba(231, 76, 60, 0.8)' },
        light: { bg: '#F8F9A', txt: '#D222529', hover: 'rgba(254, 209, 54, 0.8)' }
    }

    changeTheme = () => {
        this.setState({ isDarkTheme: !this.state.isDarkTheme })     // State teki mevcut temanın rengi ne ise onun tersini ata.
    }

    render() {
        return (
            <ThemeContext.Provider value={{ ...this.state, changeTheme: this.changeTheme }} >  {/* Spread ile state in tüm property lerini aldık*/}
                {this.props.children}   {/* Buradaki veriyi child olan BookList e göndermek için */}
            </ThemeContext.Provider>
        )
    }
}

export default ThemeContextProvider;

Şimdiden teşekkür ediyorum hatayı biz göremedik.