Intro to React > React Props

React Props

React props are what we use to pass dynamic data into our custom React components. At heart, props is the plain JavaScript object a functional component receives as its only argument, constructed from JSX attributes set on the component when rendered and the element's children.

Props is just a JavaScript object, so anything that you can fit into a JavaScript object you can pass into your React component as props. This includes JSX!

In our example, you can see we pass strings, a javascript expression, a javascript object, a JSX element, and then using a spread operator, we "splat" the contents of another JavaScript object in as props.

Lesson 16/22

const crew = [{ name: "Joe" }, { name: "Mark" }, { name: "Bob" }];

function User(props) {
  return (
    <div>
      {props.name}
      {props.data.info}
      {props.jsxElement}
      {props.nestedAttribute}
    </div>
  );
}

export default function App() {
  return (
    <div>
      <h1> 🏴‍☠️ The Captain's Crew </h1>
      {crew.map((user, i) => (
        <User
          key={`task-${i}`}
          name={user.name}
          data={{ info: " the pirate" }}
          jsxElement={<b> hello </b>}
          {...{ nestedAttribute: "team" }}
        />
      ))}
    </div>
  );
}

Open Sandbox