freeCodeCamp/curriculum/challenges/portuguese/03-front-end-development-libraries/react-and-redux/map-state-to-props.md

---
id: 5a24c314108439a4d4036145
title: Mapear state para props
challengeType: 6
forumTopicId: 301433
dashedName: map-state-to-props
---

# --description--

O componente `Provider` permite que você forneça `state` e `dispatch` para seus componentes React, mas você deve especificar exatamente que state e actions deseja. Desta forma, você tem certeza que cada componente só tem acesso ao state de que precisa. Você consegue isso criando duas funções: `mapStateToProps()` e `mapDispatchToProps()`.

Nessas funções, você declara quais pedaços do state você quer ter acesso e quais criadores de ação você precisa ser capaz de despachar. Quando essas funções estiverem no lugar, você verá como usar o método `connect` do React Redux para conectá-los aos seus componentes em outro desafio.

**Observação:** nos bastidores, o React Redux usa o método `store.subscribe()` para implementar `mapStateToProps()`.

# --instructions--

Crie a função `mapStateToProps()`. Esta função deve receber `state` como um argumento, em seguida, retornar um objeto que mapeia esse state para nomes de propriedade específicos. Essas propriedades se tornarão acessíveis para o componente via `props`. Uma vez que esse exemplo mantém o estado inteiro do app em um único array, você pode passar todo o state para o seu componente. Cria uma propriedade `messages` no objeto que está sendo retornado e defina-a no `state`.

# --hints--

A const `state` deve ser um array vazio.

```js
assert(Array.isArray(state) && state.length === 0);
```

`mapStateToProps` deve ser uma função.

```js
assert(typeof mapStateToProps === 'function');
```

`mapStateToProps` deve retornar um objeto.

```js
assert(typeof mapStateToProps() === 'object');
```

Passar um array como state para `mapStateToProps` deve retornar esse array atribuído à chave `messages`.

```js
assert(mapStateToProps(['messages']).messages.pop() === 'messages');
```

# --seed--

## --seed-contents--

```jsx
const state = [];

// Change code below this line
```

# --solutions--

```jsx
const state = [];

// Change code below this line

const mapStateToProps = (state) => {
  return {
    messages: state
  }
};
```