0

Three places to declare variables or functions like the following code:

import React from 'react';
import ReactDOM from 'react-dom';

const Greeting = props => (
  <>Hello, {props.name}</>
);

class Main extends React.Component {
  Greeting3 = props => (
    <>I'm fine, props.name</>
  );
  render() {
    const Greeting2 = props => (
      <>Hi Hi, {props.name}</>
    );
    return (
      <>
        <Greeting name="Mary" /><br/>
        <Greeting2 name="Ann" /><br/>
        <this.Greeting3 name="John" />
      </>
    );
  }
}

ReactDOM.render(<Main />, document.getElementById('root'));

The places of variables Greeting, Greeting2 and Greeting3 are all well declaring and it works. What is the difference for these three places?

Thank you very much.

Diviner
  • 3
  • 7
  • The duplicate addresses 2 of the 4 components you have in this code. But honestly I think the dupe is incorrect as for addressing the main part of your question. `Greeting2` and `Greeting3` are anti-patterns. There's no reason to ever use them this way. – Brian Thompson Apr 14 '22 at 20:57
  • Because they are all the functions that returns a jsx? What's weird in this? – Konrad Apr 14 '22 at 22:12
  • Sorry, yes I do know three Greeting/Greeting2/Greeting3 are totally duplicated in their usage, and anti-patterns. I just use this code to represent what I mean Three Declarating Places in a component that I don't know the places names. And that is the good time to use every place for declaring Functions or Variables, and so forth. Thank you very much. – Diviner Apr 15 '22 at 07:44

0 Answers0