initial

joplin notion extension/Web Development/React/Tips/Props.children.md

@@ -0,0 +1,38 @@
+Props.children
+
+
+
+    My simple explanation of what this.props.children does is that it is used to display whatever you include between the opening and closing tags when invoking a component.
+
+    A simple example:
+
+    Here’s an example of a stateless function that is used to create a component. Again, since this is a function, there is no this keyword so just use props.children
+```jsx
+const Picture = (props) => {
+  return (
+    <div>
+      <img src={props.src}/>
+      {props.children}
+    </div>
+  )
+}
+```
+    This component contains an <img> that is receiving some props and then it is displaying {props.children}.
+
+    Whenever this component is invoked, {props.children} will also be displayed and this is just a reference to what is between the opening and closing tags of the component.
+
+```jsx
+//App.js
+render () {
+  return (
+    <div className='container'>
+      <Picture key={picture.id} src={picture.src}>
+          //what is placed here is passed as props.children  
+      </Picture>
+    </div>
+  )
+}
+```
+    Instead of invoking the component with a self-closing tag <Picture /> if you invoke it with full opening and closing tags <Picture> </Picture> you can then place more code between it.
+
+    This de-couples the <Picture> component from its content and makes it more reusable.