How to reuse any class or function in react js

Question

I m new to react. when I search google How to reuse class or function ?. Then the answer like use props to reuse function or class... how to reuse function or class without using props or any other way to use utility function react js..? Simply reuse function or class like "java inheritance". But here some problem Ex :

import B from './B';
export class A extends Component {
alertMsg=()=>{

}

render(){
  return(
    <div>
      <B alertMsg={this.alertMsg} /> ---> error maximum size exceeded 
.. [ B class have multiple tag ]
     </div>
  );
 }
}


import A from './A';
export class B extends Component {

someFun=()=>{
  this.props.alertMsg(); --> error undefined function
}

render(){
  return(
    <div>
    <A property={1} property={2} property={3}/>
    </div>
  );
 }
}

How can I reuse function or class react js --> [ A.alertMsg(); ] here's my file:

utility.js

import React, {Component} from "react";

import {
  Pagination,
  PaginationItem,
  PaginationLink,
  Alert
} from "reactstrap";


export class  AlertMsg extends Component {
  constructor(props) {
    super(props);
    this.onAlert = this.onAlert.bind(this);
    this.state = {
      message : this.props.message,
      color   : this.props.color,
      visible : false
    }
  }

    // I need this alert function another component ..how can i reuse 
 this function
   onAlert=() => {
  this.setState({visible : true});
  setTimeout(() => {
    this.setState({ visible: !this.state.visible });
  }, 5000);
    console.log("visible--->"+this.state.visible);
 }

 render(){
  return(
    <div className="animated fadeIn">
    <Alert color={this.state.color} isOpen={this.state.visible} >
      {this.state.message}
    </Alert>
    <EmployeeList onAlert={this.onAlert} /> // when i use like this it will be an error..[ InternalError: too much recursion.] sometime maximum size exceeded
    </div>
       );
     }
  }

export class Pagination extends Component {

}

export class SomeOther_A extends Component {

}

export class SomeOther_B extends Component {

}

export class SomeOther_C extends Component {

}

export class SomeOther_D extends Component {

}
----------------------------------------------------------------------
EmployeeList.js

import React, {Component} from "react";

import { SomeOther_A, SomeOther_B, SomeOther_C, AlertMsg } from 
'utility';

export default class EmployeeList extends Component {

 constructor(props){
    super(props);

     this.someFuntion = this.someFuntion.bind(this);

      this.state = {    

         color   : '',
         message : ''

      }
    }

    componentDidMount(){
    // doSomething...
  }

    someFuntion = () => {
    // doSomething...
  }

    addEmployee = () =>{
     fetch(url,{
     method  : 'post',
     headers :{
     'Accept'      : 'application/json',
     'Content-Type': 'application/json'
    },
    body    : JSON.stringify(EmpInfo)
   })
   .then(res => {
     if(res.status === 200){
     var successMsg = "Successfully added Employee ..";
     var clor = "success";
     this.setState({ message: successMsg });
     this.setState({ color: clor});
     this.props.onAlert(); ---> not working this funtion...error 
     undefined funtion

     // AlertMsg.onAlert();--> how to use like this...or anyother best 
   way to reuse any utility class or funtion ?
     }
    })
    .catch(error => {
       var errMsg = "Fail to added Employee .. " + error;
       var clor = "danger";
       this.setState({ message: errMsg });
       this.setState({ color: clor});
       this.props.onAlert; ---> funtion from utility.js
    })
   }

    getEmp = () => {
     // doSomething...
     //AlertMsg.onAlert() --> need this funtion here
    }

    updateEmp = () => {
     // doSomething...
     //AlertMsg.onAlert() --> need this funtion here
    }

    deleteEmp = () => {
     // doSomething...
     //AlertMsg.onAlert() --> need this funtion here
    }

    render(){
    return(
        <div>
            <AlertMsg message={this.state.message} color=
     {this.state.color}/>
         // here multiple html tag....here...

        </div>

    );
    }
 }

I suspect your answer may be found in here: https://stackoverflow.com/questions/21854938/using-mixins-vs-components-for-code-reuse-in-facebook-react — Anthropic, Oct 27 '17 at 05:39

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.

Props and composition give you all the flexibility you need to customize a component's look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions.

If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it.

From Reactjs documentation.

If you have to, think about client side. Babylon and webpack (or other tools) compile code in one file in es5 standard. It is just regular js file.

How to reuse any class or function in react js

1 Answers1