CiyaShop (React)

It’s easy to add your own custom component in this CiyaShop react application if needs. Please follow the below steps for that.

Step 1 :

>> Please go to src->component path and create a new folder.
>> Create an index.js file in this folder
>> Please refer below reference code or get a reference from the existing component which is already done in the project.

import React, { Component } from 'react';

class ComponentName extends Component {
    constructor(props) {
      super(props);
    }
    render() {
        return (
                <div>
                    // Component Code Here...
                </div>
             )
    }
}
export default ComponentName;

Step 2: Now you can create a function for getting data or calculate data. Please refer below code.

FunctionName(functionParam){
 
   this.setState({
       ... // Set The Value in Set useing Function
   })
   
   // Function Logic.
}

Step 3: Function can be called by following ways.

      3.1  If it needs to call function immediately after a component is mount then call the function as per below example.

componentDidMount() {
     ...
     this.FunctionName();
 }

      3.2 If it is need to call function once the component render then call the function as per below example.

render() { 
  return( 
    <div> 
      ... 
      {this.FunctionName()}
    </div>
  ) 
}

      3.3 if it needs to call function with return data then it can be call by following way.

render()
{
   return(
       <div>
          ...
          <ComponentName functionreturn={this.FunctionName()} />
       </div>
       )
}