can i call a component by clicking a button and can i directly pass a component inside the onclick event value?

Question

I have tried to call a component where it has a container with all the information about products by clicking add button which is inside another component. I want the add product button to be clicked and the AddProduct component to be loaded or popup so that i can start filling the product information. code is like this:

import React from 'react'
import './Home.css'
import Dropdown from './Dropdown'
import Radiobutton from './Radiobutton'
import AddProduct from './AddProduct'


function Home() {



return (
    <div>
        <Radiobutton />
        
    <div className="product">
        <Dropdown />
        
        
        <button className="btn1" onClick={<AddProduct />}>
            &#x2b;AddProduct</button> 
    </div>
        
    </div>
  )
}

export default Home

to load this component when button is clicked.

 import React from 'react'
 import Dropdown from './Dropdown'
 import './AddProduct.css'

 function AddProduct() {
   return (
    <div className="box">
        <h1>Add Product</h1>
        <p>
        <input type="text" placeholder="Name"></input>
       <Dropdown />
        </p>
        
       
       <p>
       <input type="text" placeholder="Stock"></input>
       </p>

       <div>
       <button className="btn2">Save</button>
       </div>
    
      
    </div>
   )
}

export default AddProduct

Answer 1

Use state to handle the pop-up visibility, like a boolean value showAddProduct, toggle it when the Add Product button is clicked. Like below. Close it when the product is saved.

const { useState } = React;

// add'l components
const Radiobutton = () => <input type="radio" />;
const Dropdown = () => <select><option>Drop Down1</option>
<option>Drop Down2</option>
</select>;

//actual code
function Home() {
  const [showAddProduct, setShowAddProduct] = useState(false);
  return (
    <div>
      <Radiobutton />

      <div className="product">
        <Dropdown />

        <button className="btn1" onClick={() => setShowAddProduct(!showAddProduct)}>
          AddProduct
        </button>
      </div>
      {showAddProduct && <AddProduct setShowAddProduct={setShowAddProduct} />}
    </div>
  );
}

function AddProduct({ setShowAddProduct }) {
  return (
    <div className="modal">
      <div className="box">
        <h1>Add Product</h1>
        <p>
          <input type="text" placeholder="Name"></input>
          <Dropdown />
        </p>
        <p>
          <input type="text" placeholder="Stock"></input>
        </p>

        <div>
          <button className="btn2" onClick={() => setShowAddProduct(false)}>
            Save
          </button>
        </div>
      </div>
    </div>
  );
}



// Render it
ReactDOM.render(
  <Home/>,
  document.getElementById("react")
);

.modal {
  display: block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.box {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>