React Function Components with Examples

Function components are just like JavaScript functions. They can also receive props but can not have a state. Hence they are called stateless components. However, the state can be achieved by using a hook called useState(). We will read more about hooks later.

Let’s create the same Book component using react function component.

import React from 'react';
import ReactDOM from 'react-dom';

export default function Book() {
    return <h1>This is a book</h1>
}

ReactDOM.render(<Book/>, document.getElementById('root'));

Output

Passing props to React function components

props to functional components are passed the same as class components, but to access the props, you have to receive props object via argument and access prop by its name. See the example below.

import React from 'react';
import ReactDOM from 'react-dom';

export default function Book(props) {
    return <div>
        <h1>This is a book with index: {props.index}</h1>
        <h2>Author: {props.author}</h2>
    </div>
}

ReactDOM.render(<Book index={1} author={'Michael'}/>, document.getElementById('root'));

Output

You can also receive individual props by name and access it by name only. The above example can be written this way also.

import React from 'react';
import ReactDOM from 'react-dom';

export default function Book({index, author}) {
    return <div>
        <h1>This is a book with index: {index}</h1>
        <h2>Author: {author}</h2>
    </div>
}

ReactDOM.render(<Book index={1} author={'Michael'}/>, document.getElementById('root'));

If your component wraps another component(s) then those child components can be received by a special prop called children. You can access them the same way as you did index and author in the above example.

Using state in React function components

State is used to maintain data in a component, so whenever state changes, the component re-renders.

Since functional components are stateless by default, they dont have state, but this can be achieved by using a hook called useState().

See the below example where we have rendered a Book component. This component creates 2 state variables called index and author, assigns them initial values of ‘2’ and ‘Joy’ respectively, and access them by their name.

import React, {useState} from 'react';
import ReactDOM from 'react-dom';

export default function Book() {
  const [index, setIndex] = useState('2');
  const [author, setAuthor] = useState('Joy');
  return <div>
    <h1>This is a book with index: {index}</h1>
    <h2>Author: {author}</h2>
  </div>
}

ReactDOM.render(<Book/>, document.getElementById('root'));

Output

The useState() hook also gives us callback in order to update values of the state variables. In the example above, setIndex and setAuthor are callback for index and author respectively. You can call these methods to update their values, once updated, the Book component will re-render.