React Props

Properties

In React, props stands for Properties. React components are basically JavaScript functions, and just like functions can receive arguments, React components can receive props. Props are passed down from a parent component to a child component, but not in reverse. You pass in props as the attribute to the Component you are calling. For example, you import a component that has a color prop into a parent component. The component might look like this:

import React from "react";

const colors = (props) => {
  return (
    <div>
      <p>The color is {props.color}</p>
      <p>{props.children}</p>
    </div>
  );
};
export default colors;

And import it into the parent component:

import React from "react";
import Colors from "./components/colors";

class App extends React.Component {
  render() {
    return (
      <div>
        <Colors color="blue" />
        <Colors color="red">Nef</Colors>
        <Colors color="white" />
     </div>
    );
  }
}

export default App;

This would call the Colors component three different times and output The color is blue, The color is red, Nef, and The color is white. Note that the second “colors” has a child of “Nef”. This is passed down as a special prop called “children” automatically.

Props Passed

Props are passed down from the parent component to the component as an object. This object contains attributes assigned and the children automatically. The component automatically takes them in `const colors = (props) => {` as the