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

React useReducer Hook

Add Answer

naly moslih answered on March 11, 2020 Popularity 9/10 Helpfulness 2/10

answer React useReducer Hook

related usereducer hook react

related useReducer Hooks

related useReducer() hook react

related usestate or usereducer

related explain useReducer hook in react in details

React useReducer Hook

Comment

import { useReducer } from "react";
import ReactDOM from "react-dom/client";

const initialTodos = [
  {
    id: 1,
    title: "Todo 1",
    complete: false,
  },
  {
    id: 2,
    title: "Todo 2",
    complete: false,
  },
];

const reducer = (state, action) => {
  switch (action.type) {
    case "COMPLETE":
      return state.map((todo) => {
        if (todo.id === action.id) {
          return { ...todo, complete: !todo.complete };
        } else {
          return todo;
        }
      });
    default:
      return state;
  }
};

function Todos() {
  const [todos, dispatch] = useReducer(reducer, initialTodos);

  const handleComplete = (todo) => {
    dispatch({ type: "COMPLETE", id: todo.id });
  };

  return (
    <>
      {todos.map((todo) => (
        <div key={todo.id}>
          <label>
            <input
              type="checkbox"
              checked={todo.complete}
              onChange={() => handleComplete(todo)}
            />
            {todo.title}
          </label>
        </div>
      ))}
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Todos />);

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: hook javascript use-reducer

Link to this answer
Share Copy Link

Contributed on May 24 2022

naly moslih

0 Answers Avg Quality 2/10

Closely Related Answers

usereducer hook react

Comment

import React, { useReducer } from 'react'
import { render } from 'react-dom'

const types = {
  PET: 'PET',
  COLOR: 'COLOR',
}

const reducer = (state, action) => {
  switch (action.type) {
    case types.PET:
      return { ...state, pet: action.value }
    case types.COLOR:
      return { ...state, color: action.value }
  }
}

const initialState = {
  color: 'black',
  pet: 'cat',
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    <div>
      <label>Choose a color and a pet: </label>
      <br />
      <select
        value={state.color}
        onChange={event => {
          dispatch({ type: types.COLOR, value: event.target.value })
        }}
      >
        <option value="black">Black</option>
        <option value="pink">Pink</option>
        <option value="blue">Blue</option>
      </select>
      <select
        value={state.pet}
        onChange={event => {
          dispatch({ type: types.PET, value: event.target.value })
        }}
      >
        <option value="cat">Cat</option>
        <option value="dog">Dog</option>
        <option value="mouse">Mouse</option>
      </select>
      <br />
      <br />
      You chose a {state.color} {state.pet}
    </div>
  )
}

render(<App />, document.querySelector('#app'))

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: www.react.express

Tags: hook

Link to this answer
Share Copy Link

Contributed on Nov 08 2022

Mehedi Islam Ripon

0 Answers Avg Quality 2/10

useReducer Hooks

Comment

const [state, dispatch] = useReducer(reducer, initialArg, init);

const initialState = {count: 0};

function reducer(state, action) {
  
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}
const [state, dispatch] = useReducer(
    reducer,
    {count: initialCount}
  );

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: reactjs.org

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 06 2022

Proud Parrot

0 Answers Avg Quality 2/10

useReducer() hook react

Comment

code snippet 

https://codesandbox.io/s/usereducer-demo-zxguu?file=/src/App.js

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: hook

Link to this answer
Share Copy Link

Contributed on Nov 02 2021

Confused Crossbill

0 Answers Avg Quality 2/10

usestate or usereducer

Comment

-1

//When it's just an independent element of state you're managing

useState

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: egghead.io

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Mar 11 2020

eiymba

0 Answers Avg Quality 2/10

explain useReducer hook in react in details

Comment

import React, { useReducer } from 'react';

// Reducer function
const counterReducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

const Counter = () => {
  // Initial state and reducer
  const initialState = 0;
  const [count, dispatch] = useReducer(counterReducer, initialState);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
};

export default Counter;

Popularity 7/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: explain hook ho

Link to this answer
Share Copy Link

Contributed on Aug 21 2023

Jason Akbar

0 Answers Avg Quality 2/10

React useReducer Hook

Contents

More Related Answers

React useReducer Hook

Closely Related Answers

usereducer hook react

useReducer Hooks

useReducer() hook react

usestate or usereducer

explain useReducer hook in react in details

Grepper

Documentation

Social

Legal

Contact

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