React: Using Props

Contributions Welcome In Progress

There are two different perspectives from which we need to learn how to use react. Those are from a parent component who passes props to a child, and a react component that has props passed to it.

Parent Component Usage

JSX is awesome. It allows you to inline the props you pass to a component. These work very similarly to how HTML attributes work. Example:

<MessageComponent headerText="Hello" bodyText="World" />

In this case, MessageComponent would receive props that might look something like this:

{
  headerText: "Hello",
  bodyText: "World"
}

You can pass anything you want in props. Strings, Numbers, Objects, Arrays, etc. For example, if you had an array of items you wanted to display in a list component, you could pass them like this:

const messages = ["Hello", "Hola", "Hi", "Howdy"];
<MessageList messages={messages} />

Props work the exact same way passing arguments to functions work. The only difference is passing those arguments (props) through JSX syntax.

Using this.props or Accessing Props Passed to Component

Coming Soon

← Previous | Next Up: PropTypes

results matching ""

    No results matching ""