Graduate Program KB

React Props

  • Short for properties are a way to pass data from a parent component to a child component in a React App
  • Props are a key-value pair.
    • keyName="value"
  • Props can be accessed by the 'props' object
    //Parent
    const App = () => {
        <Child name="David" number={99} />
    }

    //Child
    const Child = (props) => {
        //Do stuff with props
        const childName = props.name;
        const childNum = props.number;
    }

    //Alternative with destructuring and default props
    const Child = ({name="Anon",number=-1}) => {
        const childName = name; //David
        const childNum = number; //99
        //If calling child component without a prop, it will use default set here "Anon" & -1
    }