How to resolve typescript errors for createContext in custom react component

Question

I'm following Advanced React Component Patterns on egghead and

I'm having a lot of problems

typing the function inside ToggleContext.Consumer :

interface IContextProps {
  on: boolean;
  toggle?: (flag: boolean) => void;
}
const ToggleContext = React.createContext<IContextProps | undefined>(undefined)

class Toggle extends React.Component {
  static On = ({children}:{children:React.ReactNode}) => (
    <ToggleContext.Consumer>
      {({on}) => (on ? children : null)}
    </ToggleContext.Consumer>
  )
  state = {on: false}
  toggle = () =>
    this.setState(
      ({on}) => ({on: !on}),
      () => this.props.onToggle(this.state.on),
    )
  render() {
    return (
      <ToggleContext.Provider
        value={{on: this.state.on, toggle: this.toggle}}
      >
        {this.props.children}
      </ToggleContext.Provider>
    )
  }
}

How is the way please?

UPDATE

I'd like to know how to type the function inside ToggleContext.Consumer

<ToggleContext.Consumer>
      {({on}) => (on ? children : null)}
</ToggleContext.Consumer>

Mohammad Harith · Accepted Answer · 2020-09-06 15:28:18Z

1

It's not really clear on which part you are facing the typing problem from your question, but here is an example that probably will help with typing for your class component.

import React from 'react'

interface IContextProps {
  on: boolean
  toggle?: (flag: boolean) => void
}

interface ToggleProps {
  onToggle: (on: boolean) => void
}

const ToggleContext = React.createContext<IContextProps | undefined>(undefined)

class Toggle extends React.Component<ToggleProps> {
  static On = ({ children }: { children: React.ReactNode }) => (
    <ToggleContext.Consumer>{(ctx) => (ctx?.on ? children : null)}</ToggleContext.Consumer>
  )
  state = { on: false }
  toggle = () => {
    const { on } = this.state
    this.setState({ on: !on })
    this.props.onToggle(on)
  }

  render() {
    return (
      <ToggleContext.Provider value={{ on: this.state.on, toggle: this.toggle }}>
        {this.props.children}
      </ToggleContext.Provider>
    )
  }
}

answered Sep 6, 2020 at 15:28

Mohammad Harith

6191 gold badge11 silver badges22 bronze badges

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

2 Comments

user3887366 Over a year ago

thanks for the reply I've updated the post I'd like to type the function inside ToggleContext.Consumer {({on}) => (on ? children : null)}

Mohammad Harith Over a year ago

cool, so you cant use {on} as your context value since there is possibility it is undefined as been specified here (< IContextProps | undefined>). Therefore, you should have something like this. {(ctx) => (ctx?.on ? children : null)}

Collectives™ on Stack Overflow

How to resolve typescript errors for createContext in custom react component

UPDATE

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related