Back

React Function Component all what you need to know about

React

React Function Component all what you need to know about

In this article, we are going to learn about a React Function Component with props, props are used in React  so as to pass information from a component to another component, this term is used in reference to data that is transferred from one component to another called "props" and is the way the React library deals with data exchanged between a React component and another React component.

Props are parameters  of the Function Component, as a component has the ability to stay generic, on the other hand, we can decide what it renders from the outside.

import React from 'react';

function App() {

  const greeting = 'Hello Function Component!';

  return <Headline value={greeting} />;

}

function Headline(props) {

  return <h1>{props.value}</h1>;

}

 

export default App;

when we come to  render a React function component,  it's normal to pass props as HTML,  they are always available along with the Function Component .

we see props coming always as objects, so information has to be extracted from props, JavaScript objects come directly to use in the function signature for props objects.

import React from 'react';

function App() {

  const greeting = 'Hello Function Component!';

  return <Headline value={greeting} />;

}

function Headline({ value }) {

  return <h1>{value}</h1>;

}

export default App;

It's worthy remarkable that in case you can't remember JavaScript destructuring, then you find it's only way to access props from component's function signature such as function Headline(value1, value2) { ... }, it's expected to see this message "props undefined".

You should be aware of this wrong way, because you can access props through its first argument of the function, it can also be destructured here: function Headline({ value1, value2 }) { ... }.

React Arrow Function Component

With JavaScript ES6 introduction, there were new coding concepts of JavaScript as well as React. For example, JavaScript functions are expressed as lambda  that we call it (arrow function). So we may call a Function Component as Arrow Function Component, it can also called Lambda Function Component, here is an example of React Component with an Arrow Function:

import React from 'react';

const App = () => {

  const greeting = 'Hello Function Component!';

  return <Headline value={greeting} />;

};

const Headline = ({ value }) => {

  return <h1>{value}</h1>;

};

export default App;

It's noticeable that React Arrow Function Components may use what we call a function block body. On the other hand, a second component is made in more lightweight with a concise body for this function.

This happens because the output of the component is only returned without doing anything in between. If curly braces are left away, the explicit return changes to be an implicit return, it can also be left out:

import React from 'react';

const App = () => {

  const greeting = 'Hello Function Component!';

  return <Headline value={greeting} />;

};

const Headline = ({ value }) =>

  <h1>{value}</h1>;

export default App;

'Arrow' function components with 'Probs' components

if you use arrow functions for React function components, there is no anything that may change for props. They will be still accessible as arguments.

With ES6 Functions, React Function Component are expressed instead of ES5 Functions as arrows which are a default way to express functions in JS.

In case you meet this error message: "React Component Arrow Function Unexpected Token",  you should think that that JavaScript ES6 becomes available for React application. It's normal if you use create-react-app, otherwise, in case of setting up your project by yourself, then for your React application, babel is enabling ES6 and other features.