{"id":29250,"date":"2021-02-15T15:49:19","date_gmt":"2021-02-15T23:49:19","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=29250"},"modified":"2022-07-20T08:43:50","modified_gmt":"2022-07-20T15:43:50","slug":"react-props","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/react-props\/","title":{"rendered":"React Props: The Basics"},"content":{"rendered":"\n
Have you ever seen the word \u201cprops\u201d in React, perhaps passed into a function? Ever wondered what it means? Due to the inherent importance of this object in React applications, it\u2019s important you understand why and how props and state are used. <\/p>\n\n\n\n
If you are confused about props you are not alone! Many of us are just used to seeing props passed in at certain points and go along with it almost subconsciously. Hopefully, this basic tutorial will help demystify why and how React props are used.<\/p>\n\n\n\n
What is React Props?<\/h2>\n\n\n\n
React props (\u201cproperties\u201d), are used as a way to pass data from one component (a parent component) to another (a child component). Props are immutable, which means that you can\u2019t change props passed to a component from within the component. Components receive data from other components with props. Props received from another component can\u2019t be modified. <\/p>\n\n\n\n
Props Syntax<\/h2>\n\n\n\n
Here is a basic index.js file example showing props being passed in as an argument:<\/p>\n\n\n\n
Here we ask our \u201cMovie\u201d component to display (by use of <… \/>) with the value \u201cCasablanca\u201d assigned to the property named \u201ctitle\u201d. <\/p>\n\n\n\n
\/\/React statement to render \u201cmyelement\u201d to the HTML element with the id named \u201croot\u201d.<\/em><\/p>\n\n\n\n
\u201cTonight we\u2019ll watch Casablanca !\u201d will be displayed. <\/p>\n\n\n\n
Sending Props to the Constructor and to super()<\/h2>\n\n\n\n
You may have seen props passed to constructor functions as well as into super()<\/em> and been super (pun intended) confused about why. Here is a simplified example: <\/p>\n\n\n\n
class Computer extends React.Component{\n\t constructor(props){ \n\t\t\tsuper(props); \/\/we passed in props to super()\n\t\t\tconsole.log(props);\n\t\t\tconsole.log(this.props);\n\t }<\/pre><\/div>\n\n\n\n
Why do we call super and why pass props to it or the constructor? Super refers to the parent class constructor. If you have had significant programming experience, you\u2019ve dealt with constructors before. Our \u201cComputer\u201d class component extends from (in other words, it is constructed using) the basic React component (as you can see in the first line). <\/p>\n\n\n\n
So above we are initializing the React component\u2019s this.props<\/em>. If we had not passed in props<\/em> to super()<\/em>, the last console.log<\/em> statement would return as undefined<\/em>. Basically, inside the constructor, you can\u2019t use \u201cthis\u201d unless you use super(props)<\/em>. If that last console.log<\/em> statement was written before super(props)<\/em> it would not work. <\/p>\n\n\n\n
Even if you do not call super()<\/em>, you\u2019ll still be able to access this.props<\/em> in other parts of your component. This is because behind the scenes, React assigns this.props<\/em> after the constructor runs. The issue is if you wanted to call a method from within the constructor itself. Coders include super(props) <\/em>for code maintainability. Your code might change in the future and you want to be prepared if it does. Let\u2019s see the following code wherein we have a \u201cPerson\u201d class component with a property (\u201cname\u201d): <\/p>\n\n\n\n
class Friend{\n\tconstructor(name){\n\t\tthis.name=name;\n\t}\n}<\/pre><\/div>\n\n\n\n
Let\u2019s add a class \u201cGoodFriend\u201d which extends Friend:<\/p>\n\n\n\n
class GoodFriend extends Friend{\n\t constructor(name){\n\t\t this.complimentYou(); \/\/you shouldn't do this before super()!\n\t\t super(name);\n\t }<\/pre><\/div>\n\n\n\n
\/\/the definition to the “complimentYou” function we called above:<\/p>\n\n\n\n
complimentYou() {\n alert('You look nice today'); \/\/ an alert that shows up on your screen\n \t}\n }<\/pre><\/div>\n\n\n\n
The above works okay. However, if you later wanted to actually use name<\/em> and add <\/p>\n\n\n\n
alert('Compliment brought to you by your friend '+ this.name);<\/pre><\/div>\n\n\n\n
to the complimentYou()<\/em> function, you\u2019d encounter a problem: the function is called in the constructor before we used super(name)<\/em> to set up the parent\u2019s (\u201cFriend\u201d) this.name<\/em>, so it would not work. This is why people call super()<\/em> and pass props!<\/p>\n\n\n\n
Sending Props into a Component<\/h2>\n\n\n\n
Here is a way you can send props into a component:<\/p>\n\n\n\n
First, define the attribute\/value pair you want to send into the component: <\/p>\n\n\n\n
Then pass along the argument you defined in the first step to the component as a props object: <\/p>\n\n\n\n
class Band extends React.Component {\n\t\trender(){\n\t\t\treturn <h1> The band name is {this.props.name}. <\/h1>;\n\t\t}\n\t}\nReactDOM.render(elementToAdd, document.getElementById('root'));<\/pre><\/div>\n\n\n\n
Passing Data to Another Component with Props<\/h2>\n\n\n\n
You can send data through props into another component. A reason to do this is code cleanliness. React is all about breaking things up into reusable, manageable sections after all. Let\u2019s look at this example wherein we pass a name value.<\/p>\n\n\n\n
The \u201cBand\u201d component\u2019s render()<\/em> function returns the value of the property named \u201cname\u201d (we will give it a value in the next component!) along with the string \u201cfrom New York City!\u201d: <\/p>\n\n\n\n
class Band extends React.Component {\n\t render() {\n return <h3> {this.props.name} from New York City! <\/h3>;\n }\n}<\/pre><\/div>\n\n\n\n
The \u201cVenue\u201d component\u2019s render()<\/em> function returns a heading stating, \u201cBand Playing Today:\u201d. Under that we see our \u201cBand\u201d component we wrote above being called to be rendered; \u201cname\u201d is assigned the value of \u201cVelvet Underground\u201d: <\/p>\n\n\n\n
class Venue extends React.Component {\n\t render() {\n\t\t\treturn (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h1>Band Playing Today:<\/h1>\n\t\t\t\t\t\t<Band name="Velvet Underground" \/>\n\t\t\t\t\t<\/div>\n\t\t\t);\n\t }\n}\n\nReactDOM.render(<Venue \/>, document.getElementById('root'));<\/pre><\/div>\n\n\n\n
Now a heading saying \u201cBand Playing Today:\u201d will be displayed along with \u201cVelvet Underground from New York City!\u201d In the last line, we only called <Venue \/><\/em> component to be rendered since \u201cvenue\u201d will already display our \u201cband\u201d component. <\/p>\n\n\n\n
Similarly, you can pass other forms of data.<\/p>\n\n\n\n
Sudoku Board Section Example with Props<\/h2>\n\n\n\n
Imagine you have a sudoku game board you want to build with React. It\u2019s made up of nine, three-by-three square sections. Let\u2019s focus on one of those three-by-three square sections. It\u2019s basically a square board made of nine smaller squares, and each square has a number. <\/p>\n\n\n\n<\/figure>\n\n\n\n
First, you create a \u201cSquare\u201d class with a render()<\/em> method that would return a button. In your CSS file, you make it into a square shape using the className<\/em> we tied to the button so you can refer to it. Notice also that the button content (what\u2019s displayed inside the button) is currently assigned to {this.props.value}<\/em>, but \u201cvalue\u201d is not yet defined: <\/p>\n\n\n\n
Now that we have the small squares taken care of, let\u2019s think of our sudoku board. We want to arrange these squares into three-by-three rows, and we want to fill these squares with numbers. Let\u2019s make our board component!<\/p>\n\n\n\n
We add the component heading and a function we\u2019ll name \u201cshowSquare\u201d. Look at the function\u2019s return statement. It calls our Square component and sets its value to \u201ci\u201d (remember we did not assign a value to the \u201cvalue\u201d property in our Square component). <\/p>\n\n\n\n
Now that we have the function that will use the square class and input a value \u201ci\u201d, let\u2019s use that in a render function to show our desired three-by-three board. We will call the renderSquare method on \u201cthis\u201d (meaning this component we are writing on, the Board component), and we will pass a number as the argument (the \u201ci\u201d in our function above): <\/p>\n\n\n\n
Notice also the className<\/em> attribute I included here for each row <div>. You can, of course, call it something different than \u201cboard-row\u201d; I included it just to remind you to use that in your CSS file to format the square rows. This is an example of what the CSS section for the board row formatting might look like: <\/p>\n\n\n\n
The last step would be to tell React to look at the DOM (Document Object Model) and render our board component to the HTML element that has the id set to \u201croot\u201d: <\/p>\n\n\n\n
After this, you would want to build the interactive functionality of your game in another component, incorporating the two stateless components you built in this example. Interactive components are stateful, which means they have a state object that remembers and handles a collection of properties about a component. You\u2019d need state in your sudoku game to accept user input and keep track of numbers as well as to do other things, such as tell the user when they\u2019ve made a mistake or won the game. <\/p>\n\n\n\n
Props vs State<\/h2>\n\n\n\n
Both props and state are objects in React which hold information about the component. It is what they do with that information that marks their differences. Props are immutable and are passed down from parent to child components, and child components can\u2019t modify the props. On the other hand, state stores information about the component which can be changed and updates itself accordingly. State can be used to store important information about a program. <\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
State and props are two concepts React users will come across. Remember that props are used to pass on information, or properties, from one component to the next. Although using state in React will add some more interactivity to your application, the tradeoff is that it will also add a lot of complexity. <\/p>\n\n\n\n
<\/figure>\n\n\n\n