Simplifying React Functional Components, Props and State

Everything you see on your app, would be a part of a component internally. A functional component looks something like below:

step 1: Import React

step 2: Import the components you need from react-native

step 3: Define your functional component

step 4: export your functional component

Props : What and why? When you want to parameterize stuff in your functional component, you might want to use props. There are a few thumb rules around props:

1. They can be passed from parent to child and not the other way around
2. React is very touchy feely about props being modified inside the component. They want all functions to be ‘pure’, in the sense, that the code inside a component shouldn’t be modifying any value of any property.

Props : How?

needs to be passed in the function parameter and used like so :

A glimpse of the “App” component, where I use this Hello World component, so we understand how to pass the props from a parent component:

Sweet and simple? :)

State : What and Why… States are also variables like props, that can be used to display dynamic content on the view. Although, instead of sending around props everywhere we need parameterization, how about components managing their own ‘states’?

State: How?

1. Defining the variable name and the corresponding setter, using the syntax as displayed under 1(in the image above). useState hook is used to set the current value of the property “count” to 0. “setCount” setter is defined, which can be used later to set the value of the “count” variable.
2. Using the “count” state in the jsx syntax
3. Using the “setCount” setter function to change the value of the count variable(incrementing the count by 1)

Results on the simulator :