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

react

How to use default props in React

Posted in react

5929

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

5929

2:24 am, October 19, 2021

View Statistics

This Week

128

This Month

681

This Year

1604

No Items Found.

Add Comment

Other Items in react

React - Use State to Toggle an Element Bind 'this' to a Class Method React - Create a Stateful Component 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 41

react shopping 59

react getElementById 82

react remember 88

react needed 95

react object 115

react Display 98

react Change 90

react element 87

react change 81

react return 109

react Document 99

react Element 98

react referrer 102

react react 133

react display 78

react how to use default props in react 84

react defaultprops 84

react props 103

react document 95

react defaultProps 219

react How to use default props in React 86

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...