Using Context API in TypeScript

Question

I'm creating a context using Typescript for the first time, and I'm having a hard time making it work. Everytime I try to create interfaces and put them in my value prop I get errors, and I really need some help. Here's my context(I'll point the errors in comments)

In the IContext, I don't know how can I put the type of the transactions(it is an array of objects)

I'd like to pass everything in the value prop, the two functions, the transactions array, and the inputs.

anyway, that's my first time applying typescript in a bigger project, so if you guys have any advices on how to practice it better, just let me know.

import React, { createContext, useState, ChangeEvent } from 'react';

interface IContext {
  handleInputChange(): void;  
  handleSubmit(): void;
  inputElements: {
    name: string;
    amount: string;
  };
  transactions: <-- I don't know what to put here
}

export const TransactionsContext = createContext<IContext | null>(null)


interface ITransaction {
  name: string;
  amount: string;
}

interface ITransactions {
  transactionList: ITransaction
}


export const TransactionsContextProvider: React.FC = ({ children }) => {
  
  const [transactions, setTransactions] = useState<ITransactions[]>([])
  const [inputs, setInputs] = useState<ITransaction>({
    name: '',
    amount: ''
  })

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target

    setInputs({...inputs, [name]: value })
  }


  const handleSubmit = (e: ChangeEvent<HTMLInputElement>) => {
    e.preventDefault()

    setTransactions([...transactions, inputs])  <-- Error here
  }

  return (
    <TransactionsContext.Provider 
      value={{ transactions, handleInputChange, handleSubmit, inputs }}> <-- Error here
        {children}
    </TransactionsContext.Provider>
  )
}

Error

In the setTransactions:

Argument of type '(ITransaction | ITransactions)[]' is not assignable to parameter of type 'SetStateAction<ITransactions[]>'. Type '(ITransaction | ITransactions)[]' is not assignable to type 'ITransactions[]'. Type 'ITransaction | ITransactions' is not assignable to type 'ITransactions'. Property 'transactionList' is missing in type 'ITransaction' but required in type 'ITransactions'.

strdr4605 · Accepted Answer · 2020-07-11 14:13:51Z

1

You don't need interface ITransactions.

use ITransaction[] as type for transactions

const [transactions, setTransactions] = useState<ITransaction[]>([])

import React, { createContext, useState, ChangeEvent } from 'react';

interface ITransaction {
  name: string;
  amount: string;
}

interface IContext {
  handleInputChange(e: ChangeEvent<HTMLInputElement>): void;  
  handleSubmit(e: ChangeEvent<HTMLInputElement>): void;
  inputElements: {
    name: string;
    amount: string;
  };
  transactions: ITransaction[];
}

export const TransactionsContext = createContext<IContext | null>(null)

export const TransactionsContextProvider: React.FC = ({ children }) => {
  
  const [transactions, setTransactions] = useState<ITransaction[]>([])
  const [inputs, setInputs] = useState<ITransaction>({
    name: '',
    amount: ''
  })

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target

    setInputs({...inputs, [name]: value })
  }


  const handleSubmit = (e: ChangeEvent<HTMLInputElement>) => {
    e.preventDefault()

    setTransactions([...transactions, inputs]);
  }

  return (
    <TransactionsContext.Provider 
      value={{ transactions, handleInputChange, handleSubmit, inputs }}>
        {children}
    </TransactionsContext.Provider>
  )
}

edited Jul 11, 2020 at 14:13

answered Jul 11, 2020 at 14:06

strdr4605

4,4522 gold badges21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

gabriel_tiso Over a year ago

What can I put in the transactions in the IContext?? Btw, it worked, but I'm still getting errors related to the functions.

gabriel_tiso Over a year ago

It says that Type '(e: ChangeEvent<HTMLInputElement>) => void' is not assignable to type '() => void'.

strdr4605 Over a year ago

transactions: ITransaction[];

strdr4605 Over a year ago

interface IContext {   handleInputChange(e: ChangeEvent<HTMLInputElement>): void;     handleSubmit(e: ChangeEvent<HTMLInputElement>): void;

Collectives™ on Stack Overflow

Using Context API in TypeScript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related