<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 Items = (props) => {
return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
}
Items.defaultProps = {
quantity: 0
}
class ShoppingCart extends React.Component {
constructor(props) {
super(props);
}
render() {
{ / Change code below this line / }
return <Items quantity={10} />
{ / Change code above this line / }
}
};
ReactDOM.render(<ShoppingCart />, document.getElementById('challenge-node'));</script>
How to Override Default Props in React
The following code explains how you can override the default props in react.
In this example the default of quantity is set to 0, so we can pass in quantity in the items to override its default value.
return <Items quantity={10} />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 Items = (props) => {
return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
}
Items.defaultProps = {
quantity: 0
}
class ShoppingCart extends React.Component {
constructor(props) {
super(props);
}
render() {
{ /* Change code below this line */ }
return <Items quantity={10} />
{ /* Change code above this line */ }
}
};
ReactDOM.render(<ShoppingCart />, document.getElementById('challenge-node'));</script>External Link for How to Override Default Props in React
View Statistics
Add Comment
Other Items in react
Related Search Terms
Other Categories in Code
Random Quote
is backupper a word?
anytrans
