score:0

export function sendspeechtoserver(query){
  let test = new messagedisplay();
  test.sendmessagetoserver(query);
}

it is bad, because you should not, create new react.component instance with new keyword, better use static function like this

static sendmessagetoserver(searchquery) {
     ...code
    }

and then

export function sendspeechtoserver(query){
  messagedisplay.sendmessagetoserver(query);
}

score:1

better way to separate component(messagedisplay) and sendmessagetoserver. then you can import sendmessagetoserver awry where. you can inject sendmessagetoserver like a props:

// main.js
import { sendmessagetoserver } from './api';

<messagedisplay sendmessage={sendmessagetoserver} />

// messagedisplay.js
import react, { component } from 'react';
import proptypes from 'prop-types';

class messagedisplay extends component {
  static proptypes = {
    sendmessage: proptypes.func.isrequired,
  }

  handleclick = (e) => {
    e.preventdefault();
    this.props.sendmessage();
  };

  render() {
    return (<button onclick={this.handleclick}>send to</button>)
  }
}

export default messagedisplay;

it useful for testing.

score:1

instantiating a component manually for general purposes like let test = new messagedisplay() is an antipattern, this indicates that a class is misused.

react component classes are primarily intended to make lifecycle hooks available and maintain state. they can sparsely benefit from inheritance (besides the relationship with react.component) and other oop traits.

the fact that it's possible to use component method as new messagedisplay().sendmessagetoserver(query) means that it was a mistake to make it component method in the first place. classes aren't supposed to be glorified namespaces; es modules play the role of namespaces in modern javascript.

a proper way is to extract the method and use it in both places as regular helper function. functional approach is considered idiomatic in react.


Related Query

More Query from same tag