Avançando com props - Mllara/react-project GitHub Wiki

-Podemos definir tipos para as props, realizando uma espécie de validação;

-Definimos em um objeto chamado propTypes no próprio componente;

-E ainda há possibilidade de definir um valor padrão;

-Neste caso utilizamos o objeto defaultProps;

function Item({marca, lancamento}){

return(

    <>

        <li>

            {marca} -  {lancamento}

        </li>

        <p>Teste</p>

    </>
)

}

export default Item

No List.Js

import Item from './Item'

function List() {

return(

    <>

        <h1>Minha Lista</h1>

        <ul>

            <Item  marca="Ferrari" ano_lancamento={1985}/>

            <Item marca="Fiat"ano_lancamento={1964}/>

            <Item marca="Renault"/>

        </ul>

    </>


)

}

export default List

OBS: as propriedades string passamos entre "" e numeros {}. E para garantirque estas propriedades sejam strings e number precisa importar o PropTypes

Dentro da pasta Item.JS:

import PropTypes from 'prop-types' //ProTypes é um pacote = P maiúsculo

function Item({marca, ano_lancamento}){

return(

    <>

        <li>

            {marca} -  {ano_lancamento}

        </li>

        <p>Teste</p>

    </>

)

}

Item.propTypes = { // para acessar a propriedade é com p minúsculo marca: PropTypes.string, ano_lancamento: PropTypes.number,

}

**Outra opção: Item.defaultProps = { //não precisa importar marca: 'Faltou a marca', ano_lancamento: 000 } export default Item