**Props** in React are like function arguments. You can use props to send data to a component.

Like default values for function arguments, props also have default values.


**`defaultProps`** can be defined as a property on the component class itself to set the default props for the class.

> `defaultProps` is used for `undefined` props, not for `null` props.

# Code

For example, let's create a `CustomButton` class in React that takes `color` as a prop. 

To set a default value for the `color` prop, use the `defaultProps` property of `CustomButton` to set the default value of `color` to `blue`.

Notice that whenever you don't pass the `color` prop to `CustomButton`, it will fall back to the `blue` default prop value.


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


import React from 'react';

class CustomButton extends React.Component {
  render() {
    return (
      <button style={{color: this.props.color}}>Hello World</button>
    );
  }
}

// Setting default value for props
CustomButton.defaultProps = {
  color: 'blue'
};


export default class App extends React.Component {
  render() {
    return (
      <div>
        <CustomButton /> {/* props.color will be set to default blue */}
        <CustomButton color="green"/> {/* props.color set to green */}
      </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

GoJS React

Typescript React

Vue.js

How to set default props in React

Set default React component props with defaultProps; undefined props adopt specified defaults, while null props do not.