A **React functional component** is a simple JavaScript function that accepts [props](https://www.educative.io/answers/what-are-props-in-react) and returns a React element.  

After the introduction of React Hooks, writing functional components has become the ​standard way of writing React components in modern applications.  

> React Hooks were [introduced](https://www.educative.io/answers/react-hooks-introduction---usestate) in React $16.8$ -- they allow you to use state without writing *class components*. 

# Code

Below is an example of two functional components: `App` and `MyComponent`.

`MyComponent` takes props as an argument and returns a React element. The `App` functional component uses *MyComponent* and returns a React element.

import React from "react";
/**
 * A functional component (ES6 arrow) called MyComponent
 * that takes props as argument and returns a React
 * element.
 */
const MyComponent = (props) => {
  return (
    <div>Hello {props.name}!</div>
  );
}

/**
 * A functional component called App that returns a 
 * React element.
 */       
function App () {
  return (
    // Passing the name when using the component
    <div>
      <MyComponent name='World'/> 
      <MyComponent name='Educative'/>
    </div>
  );
}

export default 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';
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

>If you want to read more on components, state, and lifecycle methods check out, ["What is a React component?"](https://www.educative.io/answers/what-is-a-react-component).

What are React functional components?

A React functional component is a simple JavaScript function that accepts props and returns a React element. 