Welcome Guest! (App Version 5.16)

websitnero logo name

Props

What are props?

Props refers to any data to a component that "has been passed by its parent". In other words component may have data of its own - which is state and data that is passed to it from its parent - which is props. These 2 types of data are the core building information for a component.

The only difference between the behavior of state and props is that - as state is owned by a component itself it can manipulate, change or alter it. Now, as props comes from a parent and is orignially owned by "parent component" - so it cannot be manipulated by the child component when it access it using "this.props.____"

Following examples shows how data is passed from parent to child component:

App.js

import React from 'react';
import './App.css';
import Home from './components/home';

function App() {

  return (
    <div className="App">
      <Home></Home>
    </div>
  );
}

export default App;

Home.js

import React, {Component} from 'react';
import Heart from './heart';

class Home extends Component {

  state = {
    fruit: "Mango",
    color: "red",
    vegetable: "tomato"
  }

  render(){
    return(
      <Heart data={this.state}></Heart>
    )
  }
}

export default Home;

Heart.js

import React, {Component} from 'react';

class Heart extends Component {

  render(){
    return(
      <p>
        {this.props.data.fruit}, 
        {this.props.data.color}, 
        {this.props.data.vegetable}
      </p>
    )
  }
}

export default Heart;

Output:

Mango, red, tomato

File Structure:

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.