React Native Tutorial #11 - Todo App (part 3)

Hey gang, in this React Native tutorial we'll finish up the Todo app by adding a form to add new todos to the list.
----------------------------------------

🐱‍💻 🐱‍💻 Course Links:

🐱‍💻 🐱‍💻 Other Related Courses:

[deeppatel]

You are one of hard working youtubers. The difference is that other video makes happy but your videos have changed life of many and i am one of them. Love and respect from INDIA.

[lordbeldingford]

If you want to generate a new key without any conflict risk, you can write this (please note that the submitHandler function is directly written in the button in this example):

function genKey(x) {
return x.length > 0 ? (Number(x.pop().id) + 1).toString() : 1
}
<Button onPress={() => setTodos(x => [...x, { text, key: genKey(x) }])} title="ADD"/>

Here, genKey() will basically take prevState's last item's key, add +1 to it, and then transform it into a string. It will also starts at 1 if there is no task in your array.

Thank you NetNinja, your tutorials are always great!

[chanthoeurntuon]

Thank you so much for your video I easy to understand because you speak clearly and your sound so happy.

[TheAdel]

for those who want another way to get the key random value follow this steps <3 :
first in your command line type : npm install
then install uuid by tapping : npm install uuid
when you import uuid import it in that way : import {V4 as uuid } from 'uuid'
and import also react native random values like that :import
and finaly you can use it in the key proprity like that :
setTodos((prevTodos)=>{
return [
...prevTodos, {
text:text,
key:uuid() }
] })
}
hope that it will help a lot of you ;) much love <3

[anhquannguyen]

Thank you so much, the best tutorial for react native !

[mrahmedfuad]

Thank you so much net ninja for your awesome tutorial, im learning so much for every second <3

[tuetktran]

For any future students that get "ReferenceError: text is not defined" - add const before the [text, setText]

[abdullahbalkc]

thank you
master, I've made progress because of you.

[SurajKumar-xkmo]

Its totally Awesome, can you please upload a video on how to store the data using async storage in react native as the data is going to disappear when we close the app. It will be really helpful.😄

[vuongqtvn]

very simple, The Net Ninja is super hero

[VS]

I'm getting this error for some reason: ReferenceError: Can't find variable: setText... Why ? React Native can't read my useState for some reason

[StarBattle]

why not do this instead?

const submitHandler = text => {
setTodos([...todos, {text, key: Math.random().toString()}])
}

[affiliatewatch]

Great, would be awesome to see vue native tutorials, it's still pretty new.

[mohiniraut]

Thank you so much, really very helpful.

[dlong_]

My button doesn't have a background color, only the text changes color to 'coral'? Is this just because I'm using a newer version of Native, or how would I be able to add a background in the future?

[HammadKhanYT]

This code is now broke as of Dec 2020. I tried to download branch 11, that also give me error "ReferenceError: text is not defined".

These new development tool change too quickly to break old things.

[ajeelahmedabbasi]

Can someone please tell me how I can make it so that when I press the add button or use onSubmitEditing the TextInput clears up? So I can add new items without having to clear it all manually

[jamalxd]

so everything the name of params on the text input will be as value? Like on the react JS e.target.value?

[TheAnubhabdas]

Hey I was making the todo app got this warning. Failed child context type: Invalid child context 'virtualizedCll.cellKey' of number 'number' supplied to 'CellRenderer', expected 'string'. Can you please explain why am I getting this? Thanks.

[bluevision]

why you always destructure the parameter why you dont use like this

AddTodo(item)

my second question is let suppose for instance if we want to have 2 fields text and second to be time how we gonna pass these 2 values