Default Props

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:

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

Acerca de este libro

Aplicaciones reactivas con React, NodeJS & MongoDB

Todo lo que acabas de ver en este artículo es solo una pequeña parte del libro Aplicaciones reactivas con React, NodeJS & MongoDB, El libro más completo en español para aprender a crear aplicaciones web completas con las tecnologías más potentes de la actualidad, desde el Frontend con React, hasta el Backend con un poderoso API REST con NodeJS y Express y persistiendo todo en MongoDB. te invito a que veas mi libro:

Ver libro
Todos los derechos reservados ©