Props Exampe in ReactJS

ReactJs is component based.  In last post we learn how to create component in reactjs In react we develop basic components and then adds them then again
we can adds these component and make a complex ui. In Reactjs we controls the data flow with
the help of state and props . With the help of state and props we can render dynamic data in
components

# Understanding ReactJS Props
1. In ReactJS we use props to send data to components.
2. In ReactJS every component is treated as a pure javascript function.
3. In ReactJS props are equivalent to parameters of a pure javascript function.
4. Props are immutable. Because these are developed in the concept of pure functions.
In pure functions we cannot change the data of parameters. So, also cannot change the data of a prop in ReactJS.

Now we will create props example in reactJs.

In App.js part we will pass data to component. We have two component here one function component(User/USer.js) and another class based component (Profile/Profile.js). In App.js we will reuse our component

App.js

import React, { Component } from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;
import User from ‘./User/User’;
import Profile from ‘./Profile/Profile’;
class App extends Component {
render() {
return (
<divclassName=”App”>
<h1> My react application </h1>
<p>Welcome, Users </p>
<User name=”ram”salary=”1000″/>
<User name=”john”salary=”2000″/>
<Profile education=”MCA”job=”ceo”/>
</div>
);
}
}
export default App;
Functional Components :  In functional component we will pass props as parameter and get values from props as below
User.js
import React from 'react';
const user = (props) =>{
return<p>I am {props.name} and my salary is {props.salary}</p>
};
export default user;

Class based Component : In class base Component we can get value from props using this keyword .

Profile.js

import React from "react";
class Profile extends React.Component {
render(){
return<p>highest education is {this.props.education} and works as {this.props.job}</p>;
}
};
export default Profile;
Our web page such like that

Leave a Reply

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

+ 88 = 97