Default Props

Los DefaultProps son el mecanismo que tiene React para establecer un valor por default a las propiedades que no fueron definidas en la creación del componente, de esta forma, podemos establecer un valor y no dejar la propiedad en null.

Imaginemos que el componente <ItemList> que vimos anteriormente, no recibiera el precio de un producto, se vería muy mal que al usuario le mostraremos un null, por lo que entonces podríamos definir un valor de cero por default. Vamos como quedaría:

1import React from 'react'
2import Image from 'next/image'  
3import PropTypes from 'prop-types'  
4    
5class ItemList extends React.Component{  
6    
7    constructor(props){  
8    super(props)  
9    }  
10    
11    render(){  
12    return(  
13        <li>{this.props.productName} - {this.props.productPrice}</li>  
14    )  
15    }  
16}  
17    
18ItemList.propTypes = {  
19    productName: PropTypes.string.isRequired,  
20    productPrice: PropTypes.number  
21}  
22    
23ItemList.defaultProps = {  
24    productPrice: 0  
25}  
26    
27export default ItemList

Definir valores por defecto mediante los defaults props, no tiene gran ciencia, solo es establecer el nombre de la propiedad con el valor por default, solo recordemos cumplir con la estructura definida propTypes.

Default Props

Acerca de este libro