Different stateless functional component in React explained

Following the previous article we take a quick look at some different stateless functional component in React with examples.

Return a few lines of JSX wrapped in a container

Basically in stateless functional component we need to wrap the JSX code in a container to get rendered properly. Without that application will throw an error:

<a>const Profile = props => {<br/>  return (  <br/><br/>      <h1>{props.name}</h1><br/>      <p>{props.bio}</p><br/><br/>  );<br/>};<br/><br/><em>Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag</em>

</a>

Therefor we always need a wrapper to fix this as below:

const Profile = props => {
  return (  
    <div>
      <h1>{props.name}</h1>
      <p>{props.bio}</p>
    </div>;
  );
};

Typically we use a div but you can use whatever suits your code. Also in this example we have just a one line code so we can drop the {} curly braces and the return statement based on arrow functions capabilities:

const Profile = props => 
  <div>
    <h1>{props.name}</h1>
    <p>{props.bio}</p>
  </div>;

Using higher order component as a wrapper

Higher order functions in React have a wide range of usage which we will cover later. However as their simplest usage of them we can use them to wrap our stateless functional component and use a reusable component instead of a div. Obviously it is a new component so it helps to shape the component structure of the application as well. A very simple higher order component which surely should be a stateless functional component itself could look like this:

const aux = (props) => props.children;
export default aux;

As a result we don’t even need to import React as we are not writing any JSX in its statement. Therefor we can use this stateless functional component sometimes called auxiliary function in our example:

const Profile = props => {
  return (  
    <Aux>
      <h1>{props.name}</h1>
      <p>{props.bio}</p>
    </Aux>;
  );
};

Finally we can also destructure the incoming props and create a more modern stateless functional component body syntax:

const Profile = ({ name, bio }) =>
  <Aux>
    <h1>{name}</h1>
    <p>{bio}</p>
  </Aux>;

Technically this is a great approach of using higher order functions in our applications especially if we have lots of components that we can use one function to wrap them up with. In the next articles we will explain more of these components and show their other use cases. Thanks for reading.

© 2019
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.