# 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>
  );
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shopify-1.gitbook.io/react/1.-fundamentals/components/stateless.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.