CODEWITHSUNDEEP
reactjs
WhiteSolstice
WhiteSolstice

Reputation: 651

Difference between <function prop="Hello"> and {function("Hello")}

I am currently learning React and I do not understand when should I use these and when should I not? I have seen tutorials where people just use them seemingly interchangeably. Hence, I would like to know what is the differences between them and when should i or should i not use them.

For example, assuming the "function" named component returns a <div>Hello</div> after the call, I can have the following code. 

import {function} from './component';

class X extends React.Component{

   render(){
      return(
         <div>
            <function Props1="Hello"/>
         </div>
      )
   }
}

Next,I believe can also have the following code, please correct me if I'm wrong

import {function} from './component';

class X extends React.Component{

   render(){
      return(
         <div>
            {function("Hello")}
         </div>
      )
   }
}

So it seems like there are two ways for doing the exact same thing in ReactJS? Are there any reasons I should be using one over the other?

Upvotes: 1

Views: 190

Answers (2)

cbdeveloper
cbdeveloper

Reputation: 31365

When you render it like <function Props1="Hello"/>, React will create a props object, with the properties and values pairs you passed to it.

When you render it like {function("Hello") your props argument will be a string "Hello".

See snippet below:

function App() {
  return(
    <React.Fragment>
      <Component1
        props1="hello"
      />
      {Component2("hello")}
    </React.Fragment>
  );
}

function Component1(props) {
  return(
    <React.Fragment>
      Component1
      <div>Props: {JSON.stringify(props)}</div>
      <br/>
    </React.Fragment>
  );
}

function Component2(props) {
  return(
    <React.Fragment>
      Component2
      <div>Props: {JSON.stringify(props)}</div>
    </React.Fragment>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

Upvotes: 2

Zirek
Zirek

Reputation: 523

The difference is that first case it is stateful component, so the props has to be passed by something like in your case

Props1=""

then in your function component which in this case is stateful ,you get access to props via this.props.Props1

in second case it is functional component so you can get access to it like for example:

class X extends React.Component{

   render(){
      return(
         <div>
            {function("Hello")}
         </div>
      )
   }
}


function function(myprop) {
  return <div>{myprop}</div>
}

Upvotes: 1

Related Questions