A **[prop](https://www.educative.io/answers/what-are-props-in-react)** can be thought of as a parameter ​in that it changes the behavior (or output) of a component. Props can be passed to *any* component as they are declared for *any* HTML tag.

These props can be accessed in any component's class using the syntax below:

``` HTML
this.props.MyProp
```


# Code 
In the code below, we have passed a prop `name` and `location` from the parent to the child. 

import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';




import React from 'react'; 
import ReactDOM from 'react-dom'; 

// Parent Component 
class Parent extends React.Component{ 
	render(){ 
		return( 
				<div> 
					<h1>Parent Component</h1> 
					// passing arguments to child
					<Child name="Darth Vader" location = "Death Star"/> 
				</div> 
			); 
	} 
} 

// Child Component 
class Child extends React.Component{ 
	render(){ 
		return( 
				<div> 
				    // child inheriting arguments
					<h2>{this.props.name}!</h2> 
					<h3>Child Component</h3> 
					<h3>Location: {this.props.location}</h3>
				</div> 
				
			); 
	} 
} 
ReactDOM.render( 
	// passing props from parent to child. 
	<Parent />, 
	document.getElementById("root") 
); 




body {
  background-color: #FCD6CB
}
h1 {
  color: #45597E;
}

h2 {
  color: #FF8882;
}
h3 {
  color: #74C3E1;
}

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

GoJS React

Typescript React

Vue.js

How to pass props to a child component in React

Props are parameters that change a component's behavior and output, accessed in a class with `this.props.MyProp`.