react typescript context API

Panicky Parrot answered on August 19, 2022 Popularity 10/10 Helpfulness 5/10

answer react typescript context API

related react context with typescript

related How to use React context in typescript

react typescript context API

Comment

export type TodosContextState = {
  todos: string[];
  addTodo: (name: string) => void;
};
import React, { createContext, useState, FC } from "react";
import { TodosContextState } from "./types";

const contextDefaultValues: TodosContextState = {
  todos: [],
  addTodo: () => {}
};

export const TodosContext = createContext<TodosContextState>(
  contextDefaultValues
);

const TodosProvider: FC = ({ children }) => {
  const [todos, setTodos] = useState<string[]>(contextDefaultValues.todos);

  const addTodo = (newTodo: string) => setTodos((todos) => [...todos, newTodo]);

  return (
    <TodosContext.Provider
      value={{
        todos,
        addTodo
      }}
    >
      {children}
    </TodosContext.Provider>
  );
};

export default TodosProvider;

Popularity 10/10 Helpfulness 5/10 Language typescript

Source: dev.to

Tags: api react-typescript typescript

Link to this answer
Share Copy Link

Contributed on Aug 19 2022

Panicky Parrot

0 Answers Avg Quality 2/10

Closely Related Answers

react context with typescript

Comment

import { createContext } from "react";

interface AppContextInterface {
  name: string;
  author: string;
  url: string;
}

const AppCtx = createContext<AppContextInterface | null>(null);

// Provider in your app

const sampleAppContext: AppContextInterface = {
  name: "Using React Context in a Typescript App",
  author: "thehappybug",
  url: "http://www.example.com",
};

export const App = () => (
  <AppCtx.Provider value={sampleAppContext}>...</AppCtx.Provider>
);

// Consume in your app
import { useContext } from "react";

export const PostInfo = () => {
  const appContext = useContext(AppCtx);
  return (
    <div>
      Name: {appContext.name}, Author: {appContext.author}, Url:{" "}
      {appContext.url}
    </div>
  );
};

Popularity 10/10 Helpfulness 4/10 Language whatever

Source: react-typescript-cheatsheet.netlify.app

Tags: react-context re

Link to this answer
Share Copy Link

Contributed on Oct 22 2022

Panicky Parrot

0 Answers Avg Quality 2/10

How to use React context in typescript

Comment

// @types.todo.ts
export interface ITodo {
  id: number;
  title: string;
  description: string;
  status: boolean;
}
export type TodoContextType = {
  todos: ITodo[];
  saveTodo: (todo: ITodo) => void;
  updateTodo: (id: number) => void;
};

Popularity 10/10 Helpfulness 1/10 Language typescript

Source: blog.logrocket.com

Tags: react-context re

Link to this answer
Share Copy Link

Contributed on Nov 02 2022

Shaun Modipane

0 Answers Avg Quality 2/10

How to use React context in typescript

Comment

// components/AddTodo.tsx
import * as React from 'react';
import { TodoContext } from '../context/todoContext';
import { TodoContextType, ITodo } from '../@types/todo';

const AddTodo: React.FC = () => {
  const { saveTodo } = React.useContext(TodoContext) as TodoContextType;
  const [formData, setFormData] = React.useState<ITodo | {}>();
  const handleForm = (e: React.FormEvent<HTMLInputElement>): void => {
    setFormData({
      ...formData,
      [e.currentTarget.id]: e.currentTarget.value,
    });
  };
  const handleSaveTodo = (e: React.FormEvent, formData: ITodo | any) => {
    e.preventDefault();
    saveTodo(formData);
  };
  return (
    <form className="Form" onSubmit={(e) => handleSaveTodo(e, formData)}>
      <div>
        <div>
          <label htmlFor="name">Title</label>
          <input onChange={handleForm} type="text" id="title" />
        </div>
        <div>
          <label htmlFor="description">Description</label>
          <input onChange={handleForm} type="text" id="description" />
        </div>
      </div>
      <button disabled={formData === undefined ? true : false}>Add Todo</button>
    </form>
  );
};
export default AddTodo;

Popularity 10/10 Helpfulness 1/10 Language typescript

Source: blog.logrocket.com

Tags: react-context re

Link to this answer
Share Copy Link

Contributed on Nov 02 2022

Shaun Modipane

0 Answers Avg Quality 2/10

How to use React context in typescript

Comment

-1

// context/todoContext.tsx
import * as React from 'react';
import { TodoContextType, ITodo } from '../@types/todo';

export const TodoContext = React.createContext<TodoContextType | null>(null);

const TodoProvider: React.FC<React.ReactNode> = ({ children }) => {
  const [todos, setTodos] = React.useState<ITodo[]>([
    {
      id: 1,
      title: 'post 1',
      description: 'this is a description',
      status: false,
    },
    {
      id: 2,
      title: 'post 2',
      description: 'this is a description',
      status: true,
    },
  ]);
  const saveTodo = (todo: ITodo) => {
    const newTodo: ITodo = {
      id: Math.random(), // not really unique - but fine for this example
      title: todo.title,
      description: todo.description,
      status: false,
    };
    setTodos([...todos, newTodo]);
  };
  const updateTodo = (id: number) => {
    todos.filter((todo: ITodo) => {
      if (todo.id === id) {
        todo.status = true;
        setTodos([...todos]);
      }
    });
  };
  return <TodoContext.Provider value={{ todos, saveTodo, updateTodo }}>{children}</TodoContext.Provider>;
};

export default TodoProvider;

Popularity 10/10 Helpfulness 1/10 Language typescript

Source: blog.logrocket.com

Tags: react-context re

Link to this answer
Share Copy Link

Contributed on Nov 02 2022

Shaun Modipane

0 Answers Avg Quality 2/10

react typescript context API

Contents

More Related Answers

react typescript context API

Closely Related Answers

react context with typescript

How to use React context in typescript

How to use React context in typescript

How to use React context in typescript

Grepper

Documentation

Social

Legal

Contact

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