props in react app

1class MouseTracker extends React.Component {
2  constructor(props) {
3    super(props);
4    this.handleMouseMove = this.handleMouseMove.bind(this);
5    this.state = { x: 0, y: 0 };
6  }
7
8  handleMouseMove(event) {
9    this.setState({
10      x: event.clientX,
11      y: event.clientY
12    });
13  }
14
15  render() {
16    return (
17      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
18        <h1>Move the mouse around!</h1>
19        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
20      </div>
21    );
22  }
23}

1/* PASSING THE PROPS to the 'Greeting' component */
2const expression = 'Happy';
3<Greeting statement='Hello' expression={expression}/> // statement and expression are the props (ie. arguments) we are passing to Greeting component
4
5/* USING THE PROPS in the child component */
6class Greeting extends Component {
7  render() {
8    return <h1>{this.props.statement} I am feeling {this.props.expression} today!</h1>;
9  }
10}
11
12--------------------------------------------
13function Welcome(props) {
14  return <h1>Hello, {props.name}</h1>;
15}
16
17const element = <Welcome name="Sara" />;
18ReactDOM.render(
19  element,
20  document.getElementById('root')
21);

1/* PASSING THE PROPS to the 'Greeting' component */
2const expression = 'Happy';
3<Greeting statement='Hello' expression={expression}/> // statement and expression are the props (ie. arguments) we are passing to Greeting component
4
5/* USING THE PROPS in the child component */
6class Greeting extends Component {
7  render() {
8    return <h1>{this.props.statement} I am feeling {this.props.expression} today!</h1>;
9  }
10}

1function Welcome(props) {
2  return <h1>Hello, {props.name}</h1>;
3}
4
5const element = <Welcome name="Sara" />;
6ReactDOM.render(
7  element,
8  document.getElementById('root')
9);