"Accesorios" es una palabra clave especial en React. Props se usa para pasar datos a un componente.

Mientras que los accesorios se usan como una variable en un componente, podemos llegar con objetos de accesorios a los componentes.

Prop es un objeto de JavaScript y dentro de prop contiene el nombre y la variable de prop.

Debido a los accesorios, podemos hacer transferencias de valor entre 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;

En lugar de escribir accesorios cada vez, podemos escribir la propiedad dentro de los componentes;
Como esto;

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

export default Users;

El propósito de esto; cualquier proceso de listado, etc., se utiliza la propiedad clave para enumerar las expresiones que devolvemos en bucles con un buen rendimiento. Al elemento más externo se le puede dar un apoyo clave.

Tipos de accesorios

Antes de todo, necesitamos importar a PropTypes.

Cuando enviamos tipos a las propiedades que definimos, definimos tipos fuera del 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;

Si escribimos isRequired al lado después de especificar el tipo de accesorios, ese campo no se puede dejar en blanco.

Escribimos isRequired junto a la propiedad cuyo tipo hemos especificado;

name: PropTypes.string.isRequired,

Si vamos a ingresar más de un tipo de datos para una propiedad, usamos OneOfType.

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

Cuando se ingresan los datos de un tipo de objeto, usamos la forma para definir tipos para los elementos secundarios del objeto.

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

podemos dar un valor por defecto a un prop que no tiene asignado ningún tipo. Necesitamos definirlo excepto otros 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,
}