“Props” é uma palavra-chave especial no React. Props é usado para passar dados para um componente.

Enquanto props usam como uma variável em um componente, podemos chegar com props object para componentes.

Prop é um objeto JavaScript e dentro de prop contém o nome e a variável do prop.

Por causa das props, podemos fazer transferência de valor entre os componentes.

Componente 1:

import react from 'react';
import Users from './Users';

function Counter() {
  return(
    <>
      <Users name="Fatma" />
    </>
  );
}
export default Counter;

function Users(props) {
  return (
    <>
    {props.name}
    </>
  );
}
export default Users;

Em vez de escrever props toda vez, podemos escrever a propriedade dentro dos componentes;
Assim;

function Users({name, age}) {
  return (
    <>
    <h1>{name} {age}</h1>
    </>
  );
}

export default Users;

O propósito disto; qualquer processo de listagem etc. key prop é usado para listar as expressões que retornamos em loops com bom desempenho. O elemento mais externo pode receber um suporte de chave.

Tipos de adereços

Antes de tudo, precisamos importar para PropTypes.

Quando enviamos tipos para propriedades que definimos, definimos tipos fora do componente.

import PropTypes from "prop-types";

function Users({name, age, answer}) {
  return (
    <>
    <h1>{name} {age}</h1>
    </>
  );
}

Users.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  answer: PropTypes.bool,
};

export default Users;

Se escrevermos isRequired ao lado dele depois de especificar o tipo de props, esse campo não pode ser deixado em branco.

Escrevemos isRequired ao lado da propriedade cujo tipo especificamos;

name: PropTypes.string.isRequired,

Se vamos inserir mais de um tipo de dados para uma propriedade, usamos OneOfType.

age: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

Quando os dados de um tipo de objeto são inseridos, usamos a forma para definir tipos para os elementos filhos do objeto.

address: PropTypes.shape({title : PropTypes.string, zipCode: PropTypes.number,}),

podemos dar um valor padrão a um prop que não tenha nenhum tipo atribuído. Precisamos defini-lo, exceto outros tipos.

Users.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  answer: PropTypes.bool,
  address: PropTypes.shape({title : PropTypes.string, zipCode: PropTypes.number,}),
};

Users.defaultProps = {
  answer: false,
}