freeCodeCamp/curriculum/challenges/spanish/03-front-end-libraries/react/use-default-props.spanish.md

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d403616b	Use Default Props	6	false		Usar accesorios predeterminados

Description

React también tiene una opción para establecer accesorios predeterminados. Puede asignar accesorios predeterminados a un componente como una propiedad en el propio componente y React asigna el apoyo predeterminado si es necesario. Esto le permite especificar lo que debe ser un valor de propiedad si no se proporciona ningún valor explícitamente. Por ejemplo, si declara MyComponent.defaultProps = { location: 'San Francisco' } , ha definido un prop de ubicación que se establece en la cadena San Francisco , a menos que especifique lo contrario. React asigna props por defecto si los prop no están definidos, pero si pasa null como valor para un prop, seguirá siendo null .

Instructions

El editor de código muestra un componente ShoppingCart . Defina accesorios predeterminados en este componente que especifican items prop con un valor de 0 .

Tests

tests:
  - text: El componente <code>ShoppingCart</code> debe 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: 'El componente <code>ShoppingCart</code> debe tener un prop predeterminado de <code>{ items: 0 }</code> .'
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); mockedComponent.setProps({items: undefined}); return mockedComponent.find("ShoppingCart").props().items === 0; })(), "The <code>ShoppingCart</code> component should have a default prop of <code>{ items: 0 }</code>.");'

Challenge Seed

const ShoppingCart = (props) => {
  return (
    <div>
      <h1>Shopping Cart Component</h1>
    </div>
  )
};
// change code below this line

After Test

console.info('after the test');

Solution

// solution required