React: Using Props
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.