Create an Initialize Operator to Clear an Input Field
After we've loaded a new word we also want to clear the input field so that we can just start guessing the next word that has loaded. Since the broadcaster from the input field won't send any events we will need to do it manually through an operator. We can set up an operator that will initialize any value anytime the broadcaster is set up. This will allow us to send an empty string down to the listener and we can use that value to clear the value of the input field.
John Lindquist: [0:00] Let's set this up so that when I guess the word, that it will automatically clear out the text box, and let us start guessing the next word.
[0:08] We do that by assigning the value of the input field to our guess, which we'll get from this broadcaster right here, so we'll go ahead and call this our guess broadcaster. Paste that there and define a guess, which is a use broadcaster of our guess broadcaster.
[0:30] Then, we can take this guess broadcaster and just copy and paste it down here, so these are still combined. I'll hit Save.
[0:37] A prop onInput should not be null, which means that this guess needs an initial value of an empty string, so that's not null. Now, a different error, "a value prop without an onChangeHandler," so we need onChange rather than onInput right here, so we'll change this to onChange.
[0:57] Hit Save, and now our guest is caches here, so caches, and it's still working, but if I try to delete, I'm smashing on the delete key, but nothing is changing in here.
[1:11] That's because in our broadcasters, our useListener here removed all of the listeners once repeat was fired, because repeat triggered cancel. That means that this listener here from our use broadcaster was torn down and useEffect is not called again, because useEffect is operating outside of our composition of operators.
[1:35] To fire off useEffect, again, we need to pass in a dependency. We say that "When the word changes, please set up useEffect again." If we do that, now, when I type land masses, I can delete once more, and we're back to functioning where the guests can control this Input box.
[1:58] Just because useEffect is being called again, it doesn't mean that the value will be reset to an empty string. If we were to try to do that with setState in here, somehow, that would become out of the sync with our listeners and would cause some weird behavior.
[2:14] What we can do is on our guess broadcaster, I'm going to extract this, I'll call this guess pipe, and define a guess pipe right here, which means we can pluck off the target value. We also want it to start with an empty string.
[2:34] We can set up an operator, we'll just call it init, and we'll just say this takes a value, and a broadcaster, and a listener, and this just returns the broadcaster and the listener, all set up and ready to go. All we have to do for init is just pass that value to the listener.
[2:55] If we tell this to init down in here with an empty string, I'll hit Save. Now I'll type redefine and you'll see the repeat this time, once it re-setup, would trigger this init which would cause this listener to pass in an empty string and that would flow down into our guess. We can keep on guessing this word and everything is working great.