React: Properties & Notes

Pass Props to a Stateless Functional Component.

• In React, you can pass props, or properties, to child components.
• For example, let's say you have an App component which renders a child component called Welcome which is a stateless functional component. You can pass Welcome a user property by writing

<App>
  <Welcome user='Randy' />
</App>

• The property user is passed to the component Welcome. Since Welcome is a stateless functional component, it has access to this value like this.

const Welcome = (props) => <h1>Hello, {props.user}!</h1>

• You can access the value of the argument in the function body. With class components, you will see this is a little different.

• Ex:
  

const CurrentDate = (props) => {
  return (
    <div>
      <p>The current date is: </p> { /* Change code in this line */ }
    </div>
  );
};

class Calendar extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>What date is it?</h3>
        <CurrentDate /> { /* Change code in this line */ }
      </div>
    );
  }
};

Answer:

const CurrentDate = (props) => {
  return (
    <div>
      <p>The current date is: {props.date} </p>
    </div>
  );
};

class Calendar extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>What date is it?</h3>
        <CurrentDate date={Date()} />
      </div>
    );
  }
};

*Here we have a Calendar and CurrentDate components in the code editor. When rendering CurrentDate from the Calendar component,
we passed in a property of date assigned to the current date from JavaScript's Date object. Then accessed this prop in the CurrentDate component, showing its value within the p tags. Remember they must be enclosed in curly brackets, for instance date={Date()}.

• The console would read What date is it? The current date is: Mon Oct 04 2021 17:19:39 GMT-0400 (Eastern Daylight Time)

Pass an Array as Props

• Here we're just looking at how arrays can be passed as props. To pass an array to a JSX element, it must be treated as JavaScript and wrapped in curly braces.

<ParentComponent>
  <ChildComponent games={["Fifa", "Guitar Hero", "Battlefield"]} />
</ParentComponent>

• The child component has access to the array property games. Array methods such as join() can be used when accessing the property. const ChildComponent = (props) => <p>{props.games.join(', ')}</p> This will join all games array items into a comma separated string and produce:

  Fifa, Guitar Hero, Battlefield

Use Default Props.

• React also has an option to set default props. You can assign default props to a component as a property on the component itself and React assigns the default prop if necessary. This allows you to specify what a prop value should be if no value is provided.
• Example, if you declare MyComponent.defaultProps = { console: 'Playstation' }, you have defined a console prop that's set to the string Playstation, unless you specify otherwise.

Override Default Props

• The way to override the default props is to explicitly set the prop values for a component.
• This ShoppingCart component renders a child component Items. This Items component has a default prop quantity set to the integer 0. Let's Override the default prop by passing in a value of 10 for quantity.
• Since the value for quantity is an integer, it should be wrapped in curly braces like so {100}.

const Items = (props) => {
  return <h1>Quantity of Items in Cart: {props.quantity}</h1>
}

Items.defaultProps = {
  quantity: 0
}

class ShoppingCart extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <Items quantity= {10} /> { /* Changed this line */ }
  }
};

Use PropTypes to Define the Props You Expect

• React has useful features to check that components receive props of the correct type. You can set propTypes on your component to require the data to be of type array. This will throw a useful warning when the data is of any other type.
• Normally from what I've seen it's best to set propTypes when you know the type of a prop ahead of time. Here's an example to require the type function for the prop quantity.

const Items = (props) => {
  return <h1>Quantity of Items in Cart: {props.quantity}</h1>
};


Items.propTypes = { quantity: PropTypes.number.isRequired}; { /* Changed this line */ }

Items.defaultProps = {
  quantity: 0
};

class ShoppingCart extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <Items />
  }
};

• Here we simply defined propTypes for the Items component to require quantity as a prop and verify that it is of type number.

Access Props Using this.props

• So last few posts above mainly focused on ways to pass props to child components. But what if the child component that you're passing a prop to is an ES6 class component.
• To access props within a class component, you preface the code that you use to access it with this.
• FreeCodeCamp wants us to render an instance of the ReturnTempPassword component in the parent component ResetPassword. Then give ReturnTempPassword a prop of tempPassword and assign it a value of a string that is at least 8 characters long. Within the child, ReturnTempPassword, to access the tempPassword prop within the strong tags to make sure the user sees the temporary password.
• EX:

class ReturnTempPassword extends React.Component {
  constructor(props) {
    super(props);

  }
  render() {
    return (
        <div>
            <p>Your temporary password is: <strong>{this.props.tempPassword}</strong></p>
            { /* Changed this line */ }
        </div>
    );
  }
};

class ResetPassword extends React.Component {
  constructor(props) {
    super(props);

  }
  render() {
    return (
        <div>
          <h2>Reset Password</h2>
          <h3>We've generated a new temporary password for you.</h3>
          <h3>Please reset this password from your account settings ASAP.</h3>
          <ReturnTempPassword tempPassword="Thisisthenewpassword123"/> { /* Changed this line */ }
        </div>
    );
  }
};