As you may get from the title, passing props in react is not working. And i don´t get why.
Main App Component
import React from 'react'
import Product from './Product';
function App() {
return (
<div>
<h1>Hello World</h1>
<Product name="Amazon Echo" description="Your AI assistant" price={59.99} />
{/* Product name, description, price */}
</div>
);
}
export default App;
OTHER COMPONENTS
import React from 'react'
function Product(props) {
return (
<div>
<h1>{props.name}</h1>
<h2>{props.description}</h2>
<h3>{props.price}</h3>
</div>
);
}
export default Product;
Please check below code
function Product(props) {
return (
<div>
<h1>{props.name}</h1>
<h2>{props.description}</h2>
<h3>{props.price}</h3>
</div>
);
}
function App() {
return (
<div>
<h1>Hello World</h1>
<Product name="Amazon Echo" description="Your AI assistant" price={59.99} />
</div>
);
}
ReactDOM.render(
<App/>,
document.getElementById('root')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>If you're exporting a Product component from its file then the above code should work. Here is a sample code I created for you: https://codesandbox.io/s/blazing-shape-lqtbye?file=/src/App.js