I'm new to React and I have a problem which I don't know how to solve.
I have a state which tracks what I type on the textInput. But when I console.log the input that I type on the textInput, it shows the whole chunks like 'a', 'ab', 'abc' as I type. I want to be able to have control over each input I type like 'a' 'b' 'c', not the whole input like 'abc'. For this, I've tried the map and split function, which made some errors, unfortunately.
Can anyone offer some advice? I'm attaching some of the lines below.
const Words = () => {
const [correctLetters, setCorrectLetters] = useState([]);
const correctLettersHandler = (input) => {
//console.log(input) -> it shows the whole inputs
//const letter = input.map((letter) => letter.split("")); -> failed try
setCorrectLetters(input);
}
return (
<View>
<TextInput
value={correctLetters}
onChangeTedt={correctLettersHandler}
</View>
}
I recommend you take a look at The KeyboardEvent Object to get a full insight on the keyboard events.
At the bottom there are the event types that belong to the KeyboardEvent Object (already mentioned by Derek in a comment to the question):
onkeydown, the event that occurs when the user is pressing a key
onkeypress, the event that occurs when the user presses a key
onkeyup, the event that occurs when the user releases a key
Related
In react horizontal timeline is written that there should be use only date. But I have project where I want to display how we work step by step.
I guest that always there is possibility to modified some logic of code, if programmer that want to.
I have two idea:
first use vanilla javascript to render on place date, text i.e ["2018-02-23" => "contact us"]
const [value, setValue] = useState(["2000-02-23", "2001-03-22", "2002-03-23", "2003-03-23", "2004-03-26", "2005-03-27", "2005-03-28", "2006-03-29",]);
if (value[0] = "2000-02-23") {setValue( prev => prev[0] = "kontakt", ...prev)}
but it throw me an error that the object do not exist, so I can do noting with that.
I'm building up a user profile that has some addresses, the user can edit them, it's almost finished, but I'm stuck in setting the user edit address in a form.
Just like it shows in the GIF when I click the button no value is set, I'm using react-hook-form to build these forms.
This is the function that execute when I click on the button:
const editAddress = (i) => {
const addressClicked = addressList[i];
console.log(addressWatch());
setAddressValue("name", addressClicked);
setShowForm(true);
};
addressList is an array that is being looped, and then I get the key from the .map(v,i) and it returns an object with all the information that should populate the input fields for the user to edit it.
So, in the docs there is a function that is called "reset" that actually does exactly what I wanted, it wipes the current data from the form and it can replace with a new object data.
https://react-hook-form.com/api/useform/reset
The function looks like this now
const editAddress = (i) => {
const addressClicked = addressList[i];
addressReset(addressClicked);
setShowForm(true);
};
this is a sample in code sand box
https://codesandbox.io/s/restless-shadow-iiw4p?file=/src/App.jsx
I want to create table that can be added.
However can not control input value.
How can I control multiple input object value in map?
In your code sample you did not call the setValues() function. That's why you could not control the input. Here are some modifications to your code:
const inputName = (index, event) => {
let tempValues = [...values];
tempValues[index].name = event.target.value;
setValues(tempValues);
};
I hope this code will work now. I have tested it in your codesandbox example also.
here is the link to that: https://codesandbox.io/s/purple-water-d74x5?file=/src/App.jsx
I'm currently developing an App using Ionic 3 and Firebase. I'm using ionic-selectable (you can see my stackblitz here) for the user to select an option from my firebase database array and return the selected option to the user's id.
I have got everything to work, except that ionic-selectable is not reading the retrieved array form firebase.
I'm retrieving the array using the following code:
this.itemsRefdiag = afg.list('medicalhx');
this.items = this.itemsRefdiag.snapshotChanges().map(changes => {
return changes.map(c => ({ ...c.payload.val() }));
});
const dgRef = this.afg.database.ref();
dgRef.child('medicalhx').orderByChild('name').on('value', snapshot => { this.snapshot2 = JSON.stringify(snapshot).replace(/"[0-9]":{"name":|{|}/g, ""); })
My console.log results in:
"Hyperthyroidism","Hypothyroidism","Diabetes Type 1","Diabetes Type 2"
However, when using ionic-selectable for private diagnoses: Diagnosis[] = [this.snapshot2], I get 'undefined' options. However, when I manually type in private diagnoses: Diagnosis[] = ["Hyperthyroidism","Hypothyroidism","Diabetes Type 1","Diabetes Type 2"], it works. I also tried parsing the JSON array using the following code instead:
this.itemsRefdiag = afg.list('medicalhx');
this.items = this.itemsRefdiag.snapshotChanges().map(changes => {
return changes.map(c => ({ ...c.payload.val() }));
});
const dbRef = this.afg.database.ref();
dbRef.child('medicalhx').orderByChild('name').on('value', snapshot =>
{ let snapshot3 = JSON.stringify(snapshot).replace(/"}/g, `"`);
let snapshot4 = snapshot3.replace(/"[0-9]":{"name":|{|}|"/g, "");
this.snapshot2 = snapshot4.split(",");
});
My console.log results in an Object with separate strings (an array):
["Hyperthyroidism","Hypothyroidism","Diabetes Type 1","Diabetes Type 2"]
However, ionic-selectable still doesn't seem to read that and I get undefined error. Any ideas on what I may be doing wrong with the array?
EDIT
It actually does work the second time around, however the console error pops up the first time and I believe this is because it's not waiting for the array results to pop-up the first time around. Is there a way to add a wait time until the array loads?
The second code listed in the question converting it to a real array worked but required a loading time, hence poping up a console error. I managed to get around the loading time issue by implementing Asynchronous searching as per this stackblitz.
Am working on simple turn based game using WPF and ReactiveUI? I am very new to Reactive UI/Reactive Extensions.
On a particular View, I have 3 buttons, say "Kick", "Punch", "Run Away".
On clicking any of these buttons, It will call either, the Kick, Punch or RunAway functions of the Fight Class, all of which return a string, which I display on the view.
this.KickCommand = ReactiveCommand.CreateCommand();
this.KickCommand.Subscribe(x =>
{
this.Message = this.Fight.Kick();
});
Similarly, I have remaining Commands.
I would like to do the following.
When a Command is triggered I want all the commands to be disabled for duration of 2 seconds, while the message is being displayed and then after two seconds the message is cleared out and the command are enabled again.
Thanks in advance.
Here one way to do it, with comments:
var canExecute = new Subject<bool>();
KickCommand = ReactiveCommand.Create(canExecute);
PunchCommand = ReactiveCommand.Create(canExecute);
RunAwayCommand = ReactiveCommand.Create(canExecute);
new[] { KickCommand, PunchCommand, RunAwayCommand }.Select(cmd => {
// skip the initial false, we don't want to delay that one
var isExec = cmd.IsExecuting.Skip(1);
// delay re-activation (falses) by 2s
return new[] { isExec.Where(x => x), isExec.Where(x => !x).Delay(TimeSpan.FromSeconds(2)) }.Merge()
// add back an initial false
.StartWith(false);
})
// all commands needs to be in this non-executing-since-2s state
.CombineLatest(l => l.All(x => !x))
.ObserveOn(RxApp.MainThreadScheduler)
.Do(ClearMessageIfTrue)
.Subscribe(canExecute);
I skipped the command subscribe parts as you seem to already have that one.