ReactJS Part3 : Props

Props allows pass data to a component. 

In this example we can pass data from the parent component ie. App.js to the child component ie. Contact.js.

Contact.js

import React from 'react'

function Contact(props) {
  return (
    <div>{props.name}</div>
  )
}
export default Contact

App.js

import Contact from './components/Contact';

function App() {
  return (
    <div>
       <h3>Props</h3>
       
       <Contact name = "Shalvin P D"/>
       <Contact name = "Arun Kumar"/>
    </div>
  );
}
export default App;

Here is the Contact.js functional component making use of ES6 arrow syntax.

const Contact = (props) =>  {
  return (
    <div>{props.name}</div>
  )
}
export default Contact