Skip to content

<Subscribe> not working #263

@afroguy16

Description

@afroguy16

Hi, I tried to implement this with my knowledge of how it works in Angular, that is, handle the subscription by myself. It worked right, but it was failing in RTL. So I followed the documentation and used the <Subscribe></Subscribe> component to wrap my component, but I was getting an error Uncaught [Error: Missing Subscribe!]. So I brought down my implementation and followed the docs word for word, but the error didn't go away. Below is the code and the error:

import { createSignal } from "@react-rxjs/utils"
import { map } from "rxjs/operators"

// A signal is an entry point to react-rxjs. It's equivalent to using a subject
const [textChange$, setText] = createSignal<string>();

const [useText, text$] = bind(textChange$, "")

function TextInput() {
  const text = useText()

  return (
    <div>
      <input
        type="text"
        value={text}
        placeholder="Type something..."
        onChange={(e) => setText(e.target.value)}
      />
      <br />
      Echo: {text}
    </div>
  )
}

// Previously...
// const [useText, text$] = bind(...);

const [useCharCount, charCount$] = bind(
  text$.pipe(
    map((text) => text.length)
  )
)

function CharacterCount() {
  const count = useCharCount()

  return <>Character Count: {count}</>
}

function CharacterCounter() {
    return (
      <div>
        <Subscribe>
          <TextInput />
          <CharacterCount />
        </Subscribe>
      </div>
    )
  }

export default CharacterCount

image

##Steps to Produce

  1. Create react app with typescript template
  2. Copy paste the code from the documentation
  3. Run npm start

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions