Mayju's Thoughts

React Props

Mayju's photo
Mayju
·

1 min read

Props are short for Properties. In React, argument(s) are passed into a react component as props by adopting the same syntax as HTML attributes. 

//The element, Bear has an attribute, type.
const myBear = <Bear type="Panda"/>;

//To use the attribute, type, you need to use this.prop.type
class Bear extends React.Component
{
    render()
    {
        return<h1>It is a {this.props.type}<h1/>;
    }
}

Data (string or variable name or object) can be passed from one component to another as parameters through the use of props as shown below:

class Alina extends React.Component
{
    render()
    {
        return
       <div>
            <h1>Alina really likes<h1/><Bear type="Polar Bear"/>
       </div>
    }
}

Props are read-only which means that they can only be read but not modified. Components declared as either function or class should not try to modify their own props. This is because React components are pure functions. For instance, the functional component shown below does not modify its props. Pure Functions are functions in which the same input arguments will always return the same result. As shown in the code snippet below, the same inputs (me = 1 and you = 1 ) will always return the same result which is 2.

function Together(me,you)
{
    return me + you;
}

Check out these links below to find out more about Pure Functions:

ReactFrontend Development