> For the complete documentation index, see [llms.txt](https://shopify-1.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shopify-1.gitbook.io/react/1.-fundamentals/components/stateless.md).

# Stateless

Stateless components are the simplest way to define a component. They are said to be **\*pure**: given a set of props, stateless components always return the same output.

To create a stateless component, we write a JavaScript function that returns JSX:

```javascript
function Title() {
  return (
    <h1>Hello World</h1>
  );
}

// Later in our app, we can render this component by invoking it
<Title />
```

Notice that `Title` is capitalized. When creating custom React components you need to capitalize the name of the component. This lets the [JSX transpiler](https://babeljs.io/docs/plugins/transform-react-jsx/) know that this is a custom component, and not a built-in HTML element.

As it stands, our Title component isn't very re-usable though, since it will always return 'Hello World' as its value. To create components that are generic and re-usable, we'll need to be able to pass them attributes, which will be the subject of the next section.

## Passing data to our component

### Specifying attributes with JSX

The simplest way to explain component props would be to say that they function similarly to HTML attributes. In other words, props provide configuration values for the component.

```javascript
<Title value="🐯 Emoji Picker 🐬" />
```

We'll need to slightly update the implementation of the `Title` component to read the `value` attribute from it's props:

```javascript
/*
 * Functional components receive a `props` parameter,
 * which contains all the attributes passed to them.
 */
function Title(props) {
  return (
    <h1>{props.value}</h1>
  );
}
```

![Title Component](https://user-images.githubusercontent.com/1416436/27197363-eca74c2c-51db-11e7-8e45-3e946e3b3a7d.png)

### Prop Types

Props can be any valid JavaScript expression:

* String
* Number
* Array
* Object
* Function

They can also span on multiple lines for easier readability.

Here's an example using a combination of different expressions:

```javascript
<ProductList
  products={[
    {name: 'Leather Wallet', price: 40},
    {name: 'Fidget Spinner', price: 10},
    {name: 'Hoverboard', price: 999},
  ]}
  onProductSelect={function(product) {
    console.log(product);
  }}
  limit={10}
/>
```

*Note: As you may have noticed, Numbers, Arrays, Objects, and Functions must be wrapped within curly braces.*

### Passing children to Components

Passing children to components is as simple as

```jsx
<Title>
  🐑 Emoji picker 🐑
</Title>
```

To be able to do that, you will have to modify your existing `Title` component to use `props.children` as follows:

```jsx
function Title(props) {
  return (
    <h1>{props.children}</h1>
  );
}
```

To add some specific CSS you can create a `Title.css` file that you will import in `Title.js` as follow:

```javascript
import React from 'react';

export default function Title (props) {
  return (
    <h1
      className='Title'
      style={{
        fontSize: '2em',
        textAlign: 'center',
        fontWeight: 600,
        marginBottom: '1em',
        lineHeight: 1,
      }}
    >
      {props.children}
    </h1>
  );
}
```