Props in Class Component

 

Class component

Components come in two types, Class components and Function components, today we will concentrate on Class components.When creating a class component, the component's name must always start with an upper case letter.

The component has to include the extends React.Component statement, this statement creates an inheritance to React.Component, and gives your component access to React.Component's functions.

The class component also requires a render() method, this method returns HTML.

Like we saw yesterday, a component can also have props and children. Props are arguments passed into React components and are passed to components via HTML attributes.

Component State

React components has state object. The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders.

Here you can find the Props sharing in Class Component

in App.js

    import React, { Component } from 'react'

    import Child from './Child'

    export default class App extends Component {

      state={

        name:'this is ramesh'

      }

      render() {

        return (

          <div>

                         

              <Child data={this.state.name} />

          </div>

        )

      }

    }

Child.js

    import React, { Component } from 'react'

    export default class Child extends Component {

    render() {

        return (

        <div>

           

                <h2>{this.props.data}</h2>

        </div>

        )

    }

    }