How to use default props in React [ react ] - KruXoR

react

How to use default props in React

Posted in react

5059

2:24 am, October 19, 2021

How to use default props in React

If you dont want to specify props every time you use an element, you can also specify defaults for these items. This can also be useful to remember which props are needed per component.

This can be added with the component name and then using the defaultProps.

In the following example the defaultProps are added but they are not displayed in the ShoppingCart object.

HTML

<div id="challenge-node"></div>

Scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0-alpha-5fa4d79b0-20211008/umd/react.production.min.js" integrity="sha512-5PVmWGoNJocWPdQJmJd1aRbz3cFcFgXctWKLWcitqtgX64jF+ttfg9g2oLltmeQ1HUo3gT6QchaMK3h+S+JG4Q==" crossorigin="anonymous"
  referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0-alpha-5fa4d79b0-20211008/umd/react-dom.production.min.js" integrity="sha512-pUsjUv+9XgkTn+UbLyNIT4YNZPF2p0E45FBKmDL7Ti8iovYwp2CUkQs6Q7J9y5scLxWaOM+T5jJc0ls+WHUcmQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
const ShoppingCart = (props) => {
  return (
    <div>
      <h1>Shopping Cart Component</h1>
    </div>
  )
};
// Change code below this line
ShoppingCart.defaultProps = { items: 0 }
ReactDOM.render(<ShoppingCart />, document.getElementById('challenge-node'));
</script>

Posted in react

5059

2:24 am, October 19, 2021

View Statistics

This Week

200

This Month

531

This Year

734

No Items Found.

Add Comment

Other Items in react

Using props with Stateless Functional Components in React How to Access Props Using this.props in React How to Use PropTypes to Define Props in React How to Override Default Props in React How to use default props in React How to Pass an Array as Props in React How to Pass Props to a Stateless Functional Component in React How to Write a React Component from Scratch How to Render a React Class Component to the DOM How to Compose React Components in React How to Use React to Render Nested Components How to Create a Component with Composition in React How to Create a React Component using the ES6 class method What is a Stateless Functional Component in React How do Self-Closing JSX Tags Work? How to Define a HTML Class in JSX in React How to Render HTML Elements to the DOM with React How to Add Comments in JSX Create a Complex JSX Element Create a Simple JSX Element adding react with JSX using babel adding react to a website in 3 steps using babel for react compiling in browser react hello world with time and date updating react hello world with variable name react basic hello world

Related Search Terms

react getelementbyid 23

react shopping 43

react getElementById 73

react remember 80

react needed 82

react object 93

react Display 94

react Change 78

react element 82

react change 75

react return 89

react Document 95

react Element 92

react referrer 89

react react 116

react display 72

react how to use default props in react 71

react defaultprops 71

react document 89

react defaultProps 183

react How to use default props in React 70

Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Random Quote

In this case my anchor this week becomes driving almost 2hrs outside of Atlanta to one of my favorite hard core gyms in the world.. MetroFlex aka The Dungeon. The gym owners turn the heat way up so it becomes a fun sweat box and the gym members just watch from afar and leave me alone. I happily drive myself long distances to find MY ANCHOR. Our anchor allows us to have balance, focus and be as productive as possible. And if you're in the middle of a heavy set and your headphones start to fall off your head, like mine did here.. well.. f*ck the headphones. Let em break and fall. You can always get a new pair, but the iron ain't ever gonna lift itself.
Unknown