Chapter 4 – Understanding ReactJS Props

No. 1101, 24th Main, JP Nagar, 1st Phase, Bangalore 560 078
In this chapter, you will learn about ReactJS Props. The word props stands for properties. Props are immutable objects that are used to send data to the components. Props are read-only property values that are passed from the parent component to child component.
Let’s continue from where we left off in the last chapter. We have already created 2 functional components and 1 class component. Now let’s use props to send data to these components.
import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return (); } function FunctionalComponent(props){ return<img src={logo} className="App-logo" alt="logo" /> Welcome to Tech diagonal tutorials
<FunctionalComponent name={"Adam"}/> <FunctionalComponentArrow course={"React"}/> <ClassComponentExample message={"Welcome"}/>Func Component Example {props.name}
} const FunctionalComponentArrow = (props) => { returnFunc Component Arrow Example {props.course}
} class ClassComponentExample extends React.Component { render() { returnClass Component {this.props.message}
; } } export default App;
Now you must be wondering what happens when parent component does not pass any attribute to child component. You can check that. Change ClassComponentExample declaration inside render as shown below
<ClassComponentExample />
You can set default property values for a component. If the parent component does not pass any values then component uses default prop values. You can declare default props as shown below.
ClassComponentExample.defaultProps = { message:"Default Msg" }