Dynamic Components

In the last sections, we learnt about JSX, what react components are and how can we create them.
Now when we know how to create a component, let’s understand how to make a component more dynamic.
Previous example created a website component with two elements. Code for the component is given below.

import React from 'react';

function website(){
     return(
         <div>
             <h1>codippa.com</h1>
             <p>Learning react</p>
         </div>   
     );
}

This component is not dynamic in that it has fixed names of website and technology. It is also not reusable because we cannot use it to display any other website and technology.

Component attributes

A component is composed of JSX which supports dynamic replacement of attributes with their values via expressions.
JSX expressions are enclosed between brackets({ and }).

Also, a component can receive arguments from outside in the form of an array of key-value pairs.
In general terms, this array is referred to as props and it can be supplied as an argument to the component function.
Suppose props array contains two key-value pairs with keys as siteName and technology.
Thus, above component code can be modified to use props and JFX expressions as below

import React from 'react';

function website(props){
     return(
         <div>
             <h1>{props.siteName}</h1>
             <p>Learning {props.technology}</p>
         </div>   
     );
}

It is not mandatory to use props as the name of the array. It can be any user defined name.

Now the question arises where do we provide the keys and values of the props array.

When attaching a component to the DOM using ReactDOM.render method, we can add attributes to the component.
Thus, we can modify the code defined in index.js file in the previous section as

import React from 'react';
import ReactDom from 'react-dom';
import Website from './components/website';

// attach component to the root element
ReactDom.render(
      <Website siteName="codippa.com" technolgy="react" />, 
      document.getElementById('root'));

When a component is called this way, all the attributes in the component declaration are wrapped up in an array of key-value pairs and supplied to the component function as an argument.

If you are defining a component as a class instead of a javascript function, then you need to use this.props to refer to the component attributes.
In this case, you need to use props only since it is implicitly provided by react. Example,

import React, {Component} from 'react';

class Website extends Component {
    render(){
        return(
            // component elements
            <div>
                <h1>{this.props.siteName}</h1>
                <p>Learning {this.props.technology}</p>
            </div>   
        );
    }
}
export default Website;

Accessing children

Till now, we learnt how to attach a component to the DOM, supply attribute names to the component and access them in the component definition(either javascript function or component class).

The component tags that we used were empty till this point. There might be a situation where the component tag has a child element too.
Suppose we also need to output a message enclosed between component tag as

// attach component to the root element
ReactDom.render(
  <Website siteName="codippa.com" technolgy="react">Having Fun!!</Website>, 
                 document.getElementById('root'));

How can we access the text between the component tags. React provides a special property called children which can be used for this purpose.
Thus, in order to access the text between component tags, we need to modify our component definition as

import React from 'react';

function website(props){
     return(
         <div>
             <h1>{props.siteName}</h1>
             <p>Learning {props.technology}</p>
             <p>{props.children}</p>
         </div>   
     );
}

If you are using class based components, then you can access it using this.props.children.

Leave a Reply