React Component Props example

In this tutorial, we’re gonna look at how to use React Component Props in a React example.

Related Posts:
React Hello World example
React Components example
React State example
React Note Application – React props and state example

I. React Component Props

When we need to pass immutable data to a component, we use props.

1. Props with Class Component

We use this syntax to pass data as a props element to a class template:

To get data from props, use this.props.data.
For example:

2. Props with Function

II. Practice

1. Overview

react-component-props-example-overview

Using props, we will pass:
title to Title element
description to Header component
notes array to Notes component, then each item of notes array to each Note component

For setting up environment and project files, please visit: React Components example – Setup Project.
To run this example, we just need to override app.js file.

2. app.js

3. Run & Check result

– Point cmd to project folder, then run cmd: yarn install.
node_modules folder and yarn.lock file now appear in our project folder:

react-example-after-yarn-install

– Run cmd: babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch
Now, a new app.js file appear in public/scripts folder, code insides this file was generated automatically (and also update automatically whenever we modify and save src/app.js).

– Open new cmd, point to Project folder, run cmd: live-server public.
Result in Browser:

react-component-props-example-result

III. Source code

ReactComponentProps

By grokonez | March 28, 2018.



Related Posts


Got Something To Say:

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

*