CODEWITHSUNDEEP
javascriptreactjs
Nat
Nat

Reputation: 749

How to convert arrow Function to ES5 function in react

I have this arrow function in react:

const Welcome = ({subject, description}) => (
<div>
  <Person title={`Welcome ${subject}`}></Person>
  <Profile description={description}></Profile>
</div>
)

and I would like to convert to an es5 function but I am not able to get it to work:

var Welcome = function(subject,description) {
   return(
     <Person title="Welcome ".concat(subject)/>
     <Profile description=(description)/>
   );
};

How should I go about it? Thanks

Upvotes: 2

Views: 150

Answers (3)

Yousaf
Yousaf

Reputation: 29282

You need to do following steps:

  1. wrap the 2 adjacent JSX elements with a common parent element.
  2. wrap { } around 'Welcome'.concat(subject) and description.
  3. destructure the function parameter.
var Welcome = function({subject, description}) {
   return(
     <div>
        <Person title={ 'Welcome'.concat(subject) }/>
        <Profile description={description}/>
     </div>
   );
};

Upvotes: 4

thealpha93
thealpha93

Reputation: 778

You forgot the destructuring in the params and also fogot to wrap the the html content under one parent tag

var Welcome = function({subject,description}) {
   return(
     <div>
        <Person title="Welcome ".concat(subject)/>
        <Profile description=(description)/>
    </div>
   );
};

Upvotes: 0

Anh Tuan
Anh Tuan

Reputation: 1143

var Welcome = function(subject,description) {
   return(
     <div>
        <Person title={"Welcome ".concat(subject)}/>
        <Profile description={description}/>
    </div>
   );
};

try this bro

Upvotes: 0

Related Questions