**Props**, in [React](https://www.educative.io/answers/what-is-react-js), are properties of a [Component](https://www.educative.io/answers/what-is-a-react-component) that comes in handy for customization. A prop can be thought of as a *parameter*, as it changes the behavior (or output) of a component.

Props can be used in two ways:

# 1. Functional component

​In the code snippet below, the property "*name*" of `MyComponent` is declared as a `props.name` and enclosed in `{}`; this is the general format used to declare props in a *Functional Component*. The "*name*" of `MyComponent` will be set, like a property is set for an HTML tag,  just as it has been set​ in the `render()` method of `App`.

import React from 'react';

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);


import React from 'react';

const MyComponent = (props) => {
    return (<h1>Hello {props.name}!</h1>);
}
        
export default class App extends React.Component {
  render() {
    return (

      // Passing the name when using the component
      <div>
        <MyComponent name='Julius'/> 
        <MyComponent name='Caesar'/>
      </div>
    );
  }
}



import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

Typescript React

# 2. Class component

There are a few extra things to do when using props with a *Class Component*: First, import `{ Component }` from `'react'`; second, use the `this` keyword when declaring the prop. This component is used inside `App` the same way as a *Functional Component* is. 

import React, { Component } from 'react';

class MyComponent extends Component {
    render(){
      // Using 'this' keyword
      return (
        <h1>Hello {this.props.name}!</h1>
      );
    }
}
        
export default class App extends React.Component {
  render() {
    return (

      // Passing the name when using the component
      <div>
        <MyComponent name='Julius'/> 
        <MyComponent name='Caesar'/>
      </div>
    );
  }
}



What are props in React?

Props, in React, are properties of a Component that comes in handy for customization. A prop can be thought of as a parameter, as it changes the behavior (or output) of a component. Props can be used in two ways: 1. Functional component ​In the code snippet below, the property “name” of MyComponent is declared as a props.name and enclosed in {}; this is the general format used to declare props in a Functional Component. The “name” of MyComponent will be set, like a property is set for an HTML tag,  just as it has been set​ in the render() method of App. 