React Native, Day 5, Understanding Props

Hello guys, hope you are doing good. Before starting with props, It is suggested to have a look at previous tutorials listed below:

React Native Day 1, Understanding Technology, Fundamentals and React

React Native Day 2, Creating first React Native App

React Native, Day 3, Running app on iOS simulator and exploring some cool stuffs

React Native, Day 4, Breaking down code structure

In this tutorial we are going to talk about properties. I will use the fancy term props  😎

Please support us by comment, like and share our facebook page.

Props

  • Conceptually, components are like JavaScript functions and property/props are parameters to these functions.
  • we can customize components bases on parameters/props/properties.
  • We can assign different properties to different instances of a component. Basically we can use different instances of a component with different props.

Simplest layman examples can be like:

  • Water is a component then color is property/props.
  • Your home is a component and wall paint is property.
  • Access properties value using
  • You can set property value this way:

  • Lets look at below app.js file’s code:

Output:

Let’s closely look at the code:

Parent component is App

Child component is HelloApp

We are passing property from parent component “App” to child component “HelloApp”

Here we have a component called HelloApp and we wanted to render it and pass user’s name to it as name prop/property.

To do so we would need to use JSX notation <HelloApp name="Alok" />, where name is a prop name and Alok wrapped in single quotes is a value.

You can also use any JavaScript expression wrapped in curly brackets {}. For instance, <HelloApp name={'Amit'} />.

Or you can use single quotes like <HelloApp name='Rahul' />.

we will use this.props.name to access name prop value passed from the parent component in render function.

Multiple props

Yes it’s very easy. Look at the below code:

In the above code i have used hobby as property, so simple isn’t it.

Output:

 

 

Happy coding!!! 🙂

Please support us by comment, like and share our facebook page.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.