Home » React JS

Introduction to React JS Properties (props)

React JS Properties (props): In this article, we are going study React JS properties commonly called props.
Submitted by Godwill Tetah, on November 21, 2019

React JS properties or props give more functionality to a react component.

Like most developers always say, React JS props are like HTML attributes and can also be seen as JavaScript function parameters.

Props can be added to a component the same way an attribute is added to an HTML element.

The component then receives the prop as an object. Therefore, accessing the props will similar to accessing items of a JavaScript object.

Syntax:

    <App type="android" />

Where, "App" is the name of the component.

Example:

Quickly open the index.js file your React JS application and adjust the ReactDOM.render() line.

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './index.css'

ReactDOM.render(< App kind= "android" />, document.getElementById('root'))

Let's create a file now for App component called App.js.

From our App.js file, we are going to print out the property or props of the component using the same syntax to access elements of a JavaScript object.

import React from "react"

class App extends React.Component {
	render (){
		return (
			<h1> This app is  {this.props.kind} </h1> 
		)
	}
}
export default App

Output

From the example above, we added property called "kind" to the App component. The property is then accessed from the props object using the syntax this.props.kind.

Props are read-only, meaning you can’t change it in a different line of code.

From ES6, the constructor function is used to create props in React JS components using the following syntax,

class Car extends React.Component {
	constructor(props) {
		super(props)
	}
}
render() {
	return (
		<div>
		....
		</div>
	)
}

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question.