<p>What if we want to pass data from one component to another that&#8217;s because we don&#8217;t want the component to display static data instead we want to pass dynamic data to the component and render it over the webpage. To achieve this React comes with <span style="color: #0000ff;"><strong>props</strong></span>. Basically props are used to pass data from component to component. In this article, We will talk about React props in greater detail.</p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><amp-youtube data-videoid="LxjfQ2TPt4c" data-param-rel="1" data-param-showsearch="0" data-param-showinfo="1" data-param-iv_load_policy="1" data-param-fs="1" data-param-hl="en-US" data-param-autohide="2" data-param-wmode="transparent" width="1200" height="675" layout="responsive"><a href="https://www.youtube.com/watch?v=LxjfQ2TPt4c" placeholder><amp-img src="https://i.ytimg.com/vi/LxjfQ2TPt4c/hqdefault.jpg" alt="YouTube Poster" layout="fill" object-fit="cover"><noscript><img src="https://i.ytimg.com/vi/LxjfQ2TPt4c/hqdefault.jpg" loading="lazy" decoding="async" alt="YouTube Poster"></noscript></amp-img></a></amp-youtube></span></p>
<h3 id="react-props" class="chapter-header"><strong><span style="color: #000080;">What are Props in React?</span></strong></h3>
<p>Normally you start out with React’s <strong><span style="color: #0000ff;">JSX</span></strong> syntax for rendering something to the browser when learning about React. Basically, JSX mixes HTML with JavaScript to get the best of both worlds.</p>
<p><img class="alignnone size-full wp-image-1047" src="https://c1ctech.com/wp-content/uploads/2019/05/prop11n-239937493-1558688837554.png" alt="prop11n" width="793" height="460" /></p>
<p>On splitting <span style="color: #0000ff;"><strong>Welcome</strong></span> component separately it looks something like this as shown below :</p>
<p><img class="alignnone size-full wp-image-1048" src="https://c1ctech.com/wp-content/uploads/2019/05/prop12n-627078166-1558689264684.png" alt="prop12n.png" width="857" height="593" /></p>
<p>Now, the question is <span style="color: #008000;"><strong>how to pass the data from one React component to another component(<span style="color: #000000;">ie. from App to Welcome component</span>)?</strong> <span style="color: #000000;">React allows us to pass information to a Component using something called <span style="color: #0000ff;"><strong>props</strong></span> (stands for properties). Props, in particular, is a javascript object which contains all the properties that you have defined while component invocation inside the parent component.</span></span></p>
<h3><span style="color: #000080;"><strong>Passing and Accessing props</strong></span></h3>
<p>You can pass props to a component (irrespective of its type) in the same way you define HTML attributes.</p>
<h4><span style="color: #000080;"><strong>class-based component</strong></span></h4>
<p>To access the props inside <span style="color: #000000;">class component </span>we make use of <strong><span style="color: #0000ff;">this .props</span>.</strong>The ‘this.props’ is a kind of global object which stores all of a component&#8217;s props. The <strong>propName</strong><em>(ie. <strong><span style="color: #0000ff;">welcome</span></strong>)</em>, is the key of this object with value <span style="color: #0000ff;"><strong>&#8216;Welcome to React&#8217;</strong></span>. You can see in the below code:</p>
<p><img class="alignnone size-full wp-image-1049" src="https://c1ctech.com/wp-content/uploads/2019/05/prop13n-1014711639-1559128315718.png" alt="prop13n" width="867" height="595" /></p>
<h4><span style="color: #000080;"><strong>function-based component</strong> </span></h4>
<p>In a <span style="color: #0000ff;"><strong>functional component</strong></span>, the props are defined in the same way we defined props for the class component but to access the props firstly, we have to add props parameter and then to read the props we make use of <span style="color: #0000ff;"><strong>props</strong></span> instead of<span style="color: #0000ff;"><strong> this.props</strong></span> . As shown in below code:</p>
<p><img class="alignnone size-full wp-image-1050" src="https://c1ctech.com/wp-content/uploads/2019/05/prop14n-1933235088-1559128346267.png" alt="prop14n" width="824" height="520" /></p>
<p>Since you will find always the props in the function signature, which most of the time is only the container object of your data, but not the data to be used, you can <span style="color: #008000;"><strong><a style="color: #008000;" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" target="_blank" rel="noopener noreferrer">destructure</a></strong></span> the props early in the function signature. One would call it React props destructuring:</p>
<p><img class="alignnone size-full wp-image-1061" src="https://c1ctech.com/wp-content/uploads/2019/05/prop.png" alt="prop" width="684" height="105" /></p>
<p>As you have seen, props enable you to pass variables from one to another component down the component tree. In the previous example, it was only a string variable. But props can be anything i.e integers, objects, arrays and even React components.</p>
<p>You can also define the props inline. In case of strings, you can pass props inside double quotes (or single quotes) too as in the below code.</p>
<p><img class="alignnone size-full wp-image-1051" src="https://c1ctech.com/wp-content/uploads/2019/05/prop15n-1780605649-1559131944257.png" alt="prop15n" width="823" height="470" /></p>
<p>But you can also pass other data structures with inline props. In case of objects, it can be confusing for React beginners, because you have two curly braces: one for the JSX and one for the object.</p>
<p><img class="alignnone size-full wp-image-1052" src="https://c1ctech.com/wp-content/uploads/2019/05/prop16n-1091350802-1559131971505.png" alt="prop16n" width="926" height="510" /></p>
<p>Basically, that’s how props are passed to React components. As you may have noticed, props are only passed from top to bottom in React’s component tree. There is no way to pass props up to a parent component. There is a limitation with props that is Props are read-only. We are not allowed to modify the content of a prop. Whatever the type of Component is – functional or class-based, none of them is allowed to modify their props.</p>
<!-- WP QUADS Content Ad Plugin v. 2.0.99 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

<p><img class="alignnone size-full wp-image-1060" src="https://c1ctech.com/wp-content/uploads/2019/05/prop24n-1903979977-1559132369180.png" alt="prop24n" width="865" height="821" /></p>
<p>In the above code if you will try to change the <strong><span style="color: #0000ff;">subject</span></strong> prop with some another value &#8216;Redux&#8217; then it will give an error.</p>
<h3 id="react-props-syntax-spread-rest" class="chapter-header"><span style="color: #000080;"><strong>React &#8230;props syntax</strong></span></h3>
<p>Another strategy for passing all props to a child component is the <span style="color: #008000;"><strong><a style="color: #008000;" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax" target="_blank" rel="noopener noreferrer">JavaScript spread operator</a></strong></span>. JavaScript’s spread operator in React is a useful power feature and you can read people referring to it as the <span style="color: #0000ff;"><strong>React …props syntax</strong></span> even though it is not really a React feature but just a thing coming from JavaScript.</p>
<p><img class="alignnone size-full wp-image-1053" src="https://c1ctech.com/wp-content/uploads/2019/05/prop17n-1477935187-1559132011818.png" alt="prop17n" width="1038" height="815" /></p>
<p>The props spreading can be used to spread a whole object with key-value pairs down to a child component. It has the same effect as passing each value of the object by its own to the component as before. The child component gets the props the same way as before too. Another thing which builds up on top of the <span style="color: #0000ff;"><strong>prop spread</strong></span> is the <span style="color: #0000ff;"><strong>prop spread with rest</strong>.</span></p>
<p><img class="alignnone size-full wp-image-1054" src="https://c1ctech.com/wp-content/uploads/2019/05/prop18n-3750730908-1559132053444.png" alt="prop18n" width="1053" height="819" /></p>
<p>As you can see, in the <strong>Welcome</strong> component the props are destructured but with a <strong>rest assignment</strong> which is called <strong><span style="color: #0000ff;">other</span></strong> in this case. So you have the <strong><span style="color: #0000ff;">subject</span></strong> prop but also the <strong><span style="color: #0000ff;">other</span></strong> prop which is essentially just an object with all the remaining properties (in this case only the <strong><span style="color: #0000ff;">description</span></strong>). Now you can spread the rest of the props to the Description component, because all the relevant props for the other components (here the Title component) were separated from it.</p>
<h3 id="react-props-default-value" class="chapter-header"><strong><span style="color: #000080;">React props with default value</span></strong></h3>
<p>In some cases, you may want to pass default values as props. Historically the best approach to it was using JavaScript’s logical OR operator.</p>
<p><img class="alignnone size-full wp-image-1055" src="https://c1ctech.com/wp-content/uploads/2019/05/prop19n-3331632605-1559132117206.png" alt="prop19n" width="695" height="332" /></p>
<p>You can also inline it as a prop:</p>
<p><img class="alignnone size-full wp-image-1056" src="https://c1ctech.com/wp-content/uploads/2019/05/prop20n-353413325-1559132151990.png" alt="prop20n" width="787" height="318" /></p>
<p>However, with JavaScript language additions there are other features you can use for it. For instance <strong><span style="color: #008000;"><a style="color: #008000;" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters" target="_blank" rel="noopener noreferrer">JavaScript’s default parameter</a></span></strong> for the default value of the prop:</p>
<p><img class="alignnone size-full wp-image-1057" src="https://c1ctech.com/wp-content/uploads/2019/05/prop21n-202086796-1559132218352.png" alt="prop21n" width="810" height="293" /></p>
<p>The latter is the most popular choice when using only JavaScript for the default value. However, in case you are using <strong><span style="color: #008000;"><a style="color: #008000;" href="https://reactjs.org/docs/typechecking-with-proptypes.html" target="_blank" rel="noopener noreferrer">React’s PropTypes</a></span></strong>, it’s is also possible to pass <span style="color: #0000ff;"><strong>default prop values</strong></span> the React way:</p>
<p><img class="alignnone size-full wp-image-1058" src="https://c1ctech.com/wp-content/uploads/2019/05/prop22n-656853583-1559132273545.png" alt="prop22n" width="799" height="366" /></p>
<p>After all, my recommendation would be using JavaScript’s default parameter, because everyone outside of the React world understands it as well.</p>
<h3 id="react-props-children" class="chapter-header"><strong><span style="color: #000080;">React&#8217;s children prop</span></strong></h3>
<p>The children prop in React can be used for composing React components into each other. Rather than using inheritance (due to the nature of React’s class components), React <strong><span style="color: #008000;"><a style="color: #008000;" href="https://reactjs.org/docs/composition-vs-inheritance.html" target="_blank" rel="noopener noreferrer">embraces composition over inheritance</a></span></strong>. That’s why you can just put any string, element(s) or React component(s) in between of the opening and closing component tags.</p>
<p><img class="alignnone size-full wp-image-1059" src="https://c1ctech.com/wp-content/uploads/2019/05/prop23n-1044249358-1559132318287.png" alt="prop23n" width="760" height="836" /></p>
<p>In this case, only the div element is put in between the component tags. Then in the child component, you can make use of everything which is in between of the tags (string, element(s), component(s)), by using <strong>React’s children prop</strong>. For instance, you can just render the content of the children prop like it is done in the above example.</p>
<p>In the end, props aren’t difficult. They are read-only and enable you to pass data down the component tree. Now, what if we want to manage some data inside the component that might change over time. To achieve this React comes with <strong><span style="color: #0000ff;">state</span></strong> . In the next article we will talk about state. So I hope this article gave you a good overview of the different usages of props in React.</p>
<p> ;</p>