Learn React Hooks for Frontend Development/

...

/

Writing a Function Component

Writing a Function Component

Learn about the basics of React components and create dynamic navigation components.

We'll cover the following...

React components and dynamic HTML rendering

The function, representing a component, defines what to update on the screen. It returns a value composed of some HTML-like code. We must be quite familiar with elements such as <ul> and <li>; React also allows the addition of JavaScript expressions within these elements. When used together, it requires the JavaScript expression to be wrapped in a pair of brackets, {}. The job of this expression is to provide dynamic HTML content.

For instance, if we have a text variable and would like to display it, we could do the following:

// Title component with static content
const Title = () => {
  const text = "Hello World1";
  return <h1>{text}</h1>;
}

Or, if the text is returned from a function, we can do the following:

const Title = () => {
  // Function fn returning "Hello World"
  const fn = () => "Hello World";
  // Render an h1 element with the result of invoking the function
  return <h1>{fn()}</h1>;
}

We know that this JavaScript expression is filled in the location where the children prop is. The children element does not have to be a single element; it can be an array of elements as well:

const Title = () => {
  // Array 'arr' containing elements 'Apple' and 'Orange'
  const arr = ['Apple', 'Orange'];
  // Render an unordered list with list items for each element in the array
  return (
    <ul>
      {arr.map((v, index) => (
        // Each list item corresponds to an element in the array
        <li key={index}>{v}</li>
      ))}
    </ul>
  );
}
Rendering a list in React

It seems a bit complicated in the above code, so let’s first look at the result to understand what the code tries to achieve:

// Render an unordered list with specific list items (Apple and Orange)
// Note: Using an array to directly include JSX elements in the list
return (
  <ul>
    {[<li>Apple</li>, <li>Orange</li>]}
  </ul>
);

Basically, it wants to output two li elements. To get there, we create an array containing two elements with a JavaScript expression. Once it becomes a JavaScript expression wrapped in brackets, {}, anything in JavaScript can be refactored and programmed however we want. We can use arr.mapThis function is commonly used to iterate over an array (arr) and create a new array of React elements based on the items in the original array. This is often used to dynamically render components or content based on the data in the ...