How to convert arrow Function to ES5 function in react

user_9500607 0
Viewed 87

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

reactjs javascript
3 Answers

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>
   );
};
user_60943480 
var Welcome = function(subject,description) {
   return(
     <div>
        <Person title={"Welcome ".concat(subject)}/>
        <Profile description={description}/>
    </div>
   );
};

try this bro

user_116570210

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>
   );
};
user_135498500
Related