{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/destructure-with-default-value-in-react/", "result": {"data":{"markdownRemark":{"html":"

Below, we are rendering the Input component in the App compoenent.

\n
import React from "react"\n\nconst Input = ({ type = "text", placeholder, name }) => {\n  return (\n    <div>\n      <input type={type} name={name} placeholder={placeholder} />\n    </div>\n  )\n}\n\nconst App = () => {\n  return (\n    <>\n      <Input\n        type="password"\n        name="password"\n        placeholder="Enter your password"\n      />\n    </>\n  )\n}\n\nexport default App
\n

The input element requires three props: type, name & placeholder.

\n

On line 15, we have provided a type prop of password to the Input component.

\n

On line 3, we have destructured the type prop, but have provided it with a default value of text. This means that if we don't provide any type prop to the Input component, it is going to render an input box of type text.

\n","frontmatter":{"title":"Destructure With Default Value in React","date":"2021-07-12"}}},"pageContext":{"slug":"/destructure-with-default-value-in-react/","prev":{"fields":{"slug":"/loading-external-javascript-async-vs-defer/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/difference-between-null-and-undefined-in-javascript/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}