Breaking News: Grepper is joining You.com. Read the official announcement!

context and reducer react

Grumpy Giraffe answered on October 6, 2022 Popularity 9/10 Helpfulness 1/10

answer context and reducer react

related context and reducer react

context and reducer react

Comment

// App.js

import React, { useState, useEffect } from 'react';
import Ideas from './Ideas';
import Form from './Form';
import ThemeContext from './ThemeContext';
import './App.css';

function App() {
  const [ideas, setIdeas] = useState([])
  const [theme, setTheme] = useState('light')

  useEffect(() => {
    document.title = `Ideabox (${ideas.length})`
  })

  const addIdea = (newIdea) => {
    setIdeas([...ideas, newIdea]);
  }

  const deleteIdea = (id) => {
    const filteredIdeas = ideas.filter(idea => idea.id !== id);

    setIdeas(filteredIdeas);
  }

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light'
    setTheme(newTheme)
  }

  return(
    <ThemeContext.Provider value={theme}>
      <main className='App'>
        <h1>IdeaBox</h1>
        <button onClick={toggleTheme}>Toggle Theme</button>
        <Form addIdea={addIdea} />
        <Ideas ideas={ideas} deleteIdea={deleteIdea} />
      </main>
    </ThemeContext.Provider>
  )
}

export default App;

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: frontend.turing.edu

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Oct 06 2022

Grumpy Giraffe

0 Answers Avg Quality 2/10

Closely Related Answers

context and reducer react

Comment

// ThemeContext.js

import React, { createContext } from 'react'

const ThemeContext = createContext()

export default ThemeContext

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: frontend.turing.edu

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Oct 06 2022

Grumpy Giraffe

0 Answers Avg Quality 2/10

context and reducer react

Contents

More Related Answers

context and reducer react

Closely Related Answers

context and reducer react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.