CODEWITHSUNDEEP
javascriptreactjs
Abhishek
Abhishek

Reputation: 351

Reactjs props is not working fine

var Works = function welcome(props) {
  return <h1> Hello, {props.name} </h1>;
}

/*function welcome() {
  return <h1>Hello, {this.props.name}</h1>;
}*/

const element = (<div>
    <Works name="Luffy" />
</div>);

ReactDOM.render(
  element,
  document.getElementById('root')
);

If I replace the Works component with the commented section which has no props passed into it, it gives error, I need to know why it happens where while using class we directly use this.props. Why not here?

Upvotes: 1

Views: 1427

Answers (2)

Hana Alaydrus
Hana Alaydrus

Reputation: 2220

Because in here you are not calling the props,

/*function welcome() {
  return <h1>Hello, {this.props.name}</h1>;
}*/

the code should be like this

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Full code here

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Luffy" />;

ReactDOM.render(
  element,
  document.getElementById('root')
);

Upvotes: 1

QuarK
QuarK

Reputation: 2536

You should define the name of the component after Function:

function Works(props) {
    return <h1 > Hello, { props.name } < /h1>;
}

Hope it helps!

Upvotes: 1

Related Questions