Today now in this blog i will show you about props. We know that in react js component means javascript function. And also functions are accept the attribute and laso input that’s called props. By using props we are get dynamic data and also we less the code.
Props Example With Function Component
Now in function components we are get a attribute also with “prop.propName”. So this is the simple function of javascript. Now in this example i will display the user name and email also. So we can also get array and object.
/src/User.js file
import React from 'react'
function User(prop){
return <div>
<h1>User Name : {prop.name}</h1>
<h1>User email : {prop.email}</h1>
</div>
}
export default User;
/src/App.js file
import React from 'react';
import logo from './logo.svg';
import './App.css';
import User from './User';
function App() {
return (
<div className="App">
<header className="App-header">
<User name="Codingspoint" email="Codingspoint@gmail.com" />
</header>
</div>
);
}
export default App;
Props Example With Class Component
So now here in class component we can get prop also with the “this.props” as keyword like “this.props.propName”. Now in this component we are get prop also with simple way. Now you can also get array and a object.
/src/User.js file
import React from 'react'
class User extends React.Component{
render(){
return(
<div>
<h1>User Name : {this.props.name}</h1>
<h1>User email : {this.props.email}</h1>
</div>
)
}
}
export default User;
/src/App.js file
import React from 'react';
import logo from './logo.svg';
import './App.css';
import User from './User';
function App() {
return (
<div className="App">
<header className="App-header">
<User name="codingspoint" email="codingspoint@gmail.com" />
</header>
</div>
);
}
export default App;
Read Also : Laravel 8 Eloquent Global Scope Tutorial Example
I hope it will help you. Also you can follow us on Facebook
