Props

Last Updated: February 2, 2022

How to add properties to the component

You can add dicount property to the Products component as shown in the below code and I have passed the value of discount as 10

Create the component with a Property

You can add the props: ['title'] to your component to make the title as a property.

Now create the component with the prop

import React from 'react'
import {render} from 'react-dom'
import {Products} from './products.js'

render(

    ,
    document.getElementById('root')

)

Now lets see how we can display the property value in product.js file

import React from 'react'

var createReactClass = require('create-react-class');
export const Products = createReactClass({

	render(){
		return (
  • Product A
  • Product B
  • Product C
Discount {this.props.discount}
			)
	}
})

To display the value of property we added you can use the {this.props.discount}

Test