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

react

How to use default props in React

Posted in react

462

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

462

2:24 am, October 19, 2021

View Statistics

This Week

102

This Month

673

This Year

2707

No Items Found.

Add Comment

Other Items in react

Create a React App with Vite and TypeScript on Windows 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 defaultprops 1

react display 1

react default props in React 8

react Element 3

react getelementbyid 1

react getElementById 2

react remember 3

react element 2

react how to use default props in react 6

react referrer 1

react document 1

react Document 5

react defaultProps 16

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