ReactJS- React Props | i2tutorials

Home / ReactJs – Tutorial / ReactJS- React Props

React Props

Props is the short form of properties used in react js . Props are used to pass data from one component to another in react js .
React data flow between its components is uni-directional (from parent to child)
Props are used to integrate 2 or more components in on one project.
Props allow using different components in one component.

React- Props -Example

For using props first create a react application by using the below code

              Npx create-react -app

After the react application is created, we need to create another component file in src called Component2.js.

Let’s first see the App.js where we have created the function and it is the main Component

   import React from 'react';
import './App.css'

function App() {
 return (
 <div className="App" 
<div className="main-cointainer">
            <h2>Compnent1</h2> 
            </div>
            </div>                 
      );
       } 
export default App;

Now let’s look at the other component, which component2.js

import React from 'react';
export default function Component2() {
 return (
<div className="main-cointainer">
  <h2>Compnent2</h2>

  </div>
    )
}

We require to use props for passing the Component2.js data to component1 I.e App.js

import React from 'react';
export default function Component2(props) {
 return (
   <div className="main-cointainer">
    <h2>Compnent2</h2>
         
<p>{props.data} </p>
        </div>
    )
}

After passing the Component2.js data with props we now need to call that data in App.js
For calling the props data we first need to set the state in App.js which is done by use State hook in react js

import React, { useState } from 'react';
function App() {
 const [state, setstate] = useState({data:""})

After this we will create a ChangeState function which will be called onClick of a button

   const changeState = () => {  
         setstate ({data:`
        This is component 2`});


   <Component2 data={state.data} />   
   <div className="main-cointainer">
     <h2>Compnent1</h2> 
     <button  onClick={changeState} >
     Send state 
     </button> 
    </div>

Here above we are calling the ChangeState function on a button, which when clicked will display the data/text from Component2.js.

Below is the full code of App.js

import React, { useState } from 'react';
import './App.css'
import Component2 from './Component2';


function App() {
  const [state, setstate] = useState({data:""}
    const changeState = () => {  
         setstate ({data:`
        This is component 2`});
       }; 
  return (
    <div className="App">
          <Component2 data={state.data} />   
            <div className="main-cointainer">
                <h2>Compnent1</h2> 
                <button  onClick={changeState} >
                  Send state 
                </button> 
            </div>
        </div>                 
    );
 }
export default App;