You can do the following if you would like to learn more. The above boilerplate can be used to extend the App to include more functionalities around the App. You have also gone through other aspects of React and ES6 JavaScript. The App.js file should look as below: import React from 'react' import './App.css' function App() export default App ConclusionĬongratulations! You have now built a To-do list App using React hooks and styled-components. In the src folder, open App.js and get rid of everything between Cd into todo-list and yarn start OR npm start if using npm. TodoList.js import React from ' react ' import const ListContainer = styled.

This is the function that will be passed into onPress. In App.js we will create a method called SubmitHandler, which adds each item to the list. Now, the function it will be running is the one that will be adding items to the list(array called data). onPress runs a function when a button is pressed. If you check out our above code on AddInput.js, you will see that the onPress prop is set to alert('hi'). This component takes in a prop called onPress. Let us go back to our AddInput component and look at one of the native components called TouchableOpacity. On the other hand, we have the renderItem which is a callback function that renders each item of the array of the data prop. data takes an array, in this case, an array called data which is an empty array and depends on the AddInput component for data to fill up the empty array.

FlatList has two major props which include data and the renderItem. Lists displayed with the FlatList can be infinite and unpredictable.

FlatList is a component used to display large scrollable lists. Let me explain that with something called FlatList. Enter fullscreen mode Exit fullscreen mode FlatListĪt this point, I want to let you know that a to-do list is an array.

React todolist example