ReACT -Props

ReACT-Props

One Props

function Hello(props) {
return <div>Hello, {props.who}!</div>;
}

const user = <Hello who=”Earth” />;

ReactDOM.render(
user,
document.getElementById(‘root’)
);

veridelisi

2 Props

function Hello(props)

{

return <div>Hello, {props.who2}!</div>;

}

const user = <Hello who=”Earth” who2=”Luna” />;

ReactDOM.render(

user,

document.getElementById(‘root’));

veridelisi

2 Props-2

function Hello(props) {
return <div>Hello, {props.who}, {props.who2}!</div>;
}
const user = <Hello who=”Earth” who2=”Luna” />;

ReactDOM.render(
user,
document.getElementById(‘root’)
);

veridelisi

Class Based Approach

We use “this”

import { Component } from ‘react’;

class Hello extends Component {
render()
{
return <div>Hello, {this.props.who}!</div>;
}
}

const user = <Hello who=”Earth” />;

ReactDOM.render(
user,
document.getElementById(‘root’)
);

veridelisi

Note: Thank you https://dmitripavlutin.com/react-props/ for clarification this concept.

Hello 1

Hello 2

Hello 3

Hello 4