Reactjs Props Example With Function and Class Components

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