use-proptypes-to-define-the-props-you-expect.portuguese.md

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d403616d	Use PropTypes to Define the Props You Expect	6	false		Use PropTypes para definir os suportes que você espera

Description

O React fornece recursos úteis de verificação de tipos para verificar se os componentes recebem props do tipo correto. Por exemplo, seu aplicativo faz uma chamada de API para recuperar dados que você espera estar em uma matriz, que é então passada para um componente como um prop. Você pode definir propTypes no seu componente para exigir que os dados sejam do tipo array . Isso lançará um aviso útil quando os dados forem de qualquer outro tipo. É considerado uma boa prática definir propTypes quando você conhece o tipo de suporte antes do tempo. Você pode definir uma propriedade propTypes para um componente da mesma maneira que definiu defaultProps . Fazendo isso, você verifica se os objetos de uma determinada chave estão presentes em um determinado tipo. Aqui está um exemplo para requerer a function type para um handleClick chamado handleClick : MyComponent.propTypes = { handleClick: PropTypes.func.isRequired } No exemplo acima, a parte PropTypes.func verifica que handleClick é uma função. Adicionando isRequired diz React que handleClick é uma propriedade necessária para esse componente. Você verá um aviso se esse suporte não for fornecido. Observe também que func representa a function . Entre os sete tipos primitivos de JavaScript, function e boolean (escrito como bool ) são os dois únicos que usam ortografia incomum. Além dos tipos primitivos, existem outros tipos disponíveis. Por exemplo, você pode verificar se um prop é um elemento React. Por favor, consulte a documentação de todas as opções. Nota: A partir do React v15.5.0, PropTypes é importado independentemente do React, desta forma: import PropTypes from 'prop-types';

Instructions

Defina propTypes para o componente Items para exigir quantity como um prop e verifique se é do tipo number .

Tests

tests:
  - text: O componente <code>ShoppingCart</code> deve renderizar.
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find("ShoppingCart").length === 1; })(), "The <code>ShoppingCart</code> component should render.");'
  - text: O componente <code>Items</code> deve renderizar.
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find("Items").length === 1; })(), "The <code>Items</code> component should render.");'
  - text: O componente <code>Items</code> deve incluir uma verificação de <code>propTypes</code> que exija <code>quantity</code> para ser um <code>number</code> .
    testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput("index").replace(/ /g, ""); return noWhiteSpace.includes("quantity:PropTypes.number.isRequired") && noWhiteSpace.includes("Items.propTypes="); })(), "The <code>Items</code> component should include a <code>propTypes</code> check that requires <code>quantity</code> to be a <code>number</code>.");'

Challenge Seed

const Items = (props) => {
  return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
};

// change code below this line

// change code above this line

Items.defaultProps = {
  quantity: 0
};

class ShoppingCart extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <Items />
  }
};

Before Test

var PropTypes = {
  number: { isRequired: true }
};

After Test

console.info('after the test');

Solution

// solution required