How to open a component in full screen on click of a button in react js?

Question

I have a react app where onclick of a button I am showing a nested menu list for selection of options but its very small now,but now onclick its just showing in a small part.

My nested menu component ApiDropdown:

  render() {
    return (
      <div>
        <select
          className="select"
          id="selectBox"
          multiple="multiple"
          onChange={this.changeFunc}
        >
          <option selected disabled className="option">
            Choose here
          </option>
          {this.state.options.map(
            (key, value) => (
              console.log(key["apis"]),
              (
                <>
                  <optgroup label={key["key"]} className="groupOpt">
                    <option
                      selected=""
                      value="Select All"
                      id={"Select All".concat(key["key"])}
                      class="option"
                      onClick={() =>
                        this.onClick(
                          key["key"],
                          "Select All".concat(key["key"])
                        )
                      }
                    >
                      Select All
                    </option>
                    {key["apis"].map((i, value) => (
                      <option
                        selected=""
                        className="option"
                        id={i}
                        value={i}
                        onClick={() => this.onClick(key["key"], i)}
                      >
                        {i}
                      </option>
                    ))}
                  </optgroup>
                </>
              )
            )
          )}
        </select>
        <div>
          {
            (console.log(this.state.saveflag),
            this.state.saveflag ? (
              <></>
            ) : (
              <button
                type="button"
                className="btn"
                onClick={e=> {
                  e.preventDefault();
                    this.props.data.handleApiGrants(apis);
                    this.setState({ saveflag: true });
                }}
              >
                Save
              </button>
            ))
          }
        </div>
      </div>
    );
  }
}

My main screen containing this component:

 <form className="add-form" >
        <div>
        
          <button onClick={this.setmessage} type="button" className="btn" onSubmit={this.onSubmit}>
            Grant API's
          </button>  //button I am using to show that menu.
          {this.state.showMessage && (
            <ApiDropDown
              data={{
                apigrants: this.state.apigrants,
                handleApiGrants: this.handleApiGrants.bind(this),
              }}
            />  //the nested component
          )}
        </div>
        <div>
          <input
            className="clientparams"
            type="text"
            placeholder="Add Client"
            defaultValue={this.state.client_name}
            id="client_field"
            onChange={(e) => (this.state.client_name = e.target.value)}
          />
        </div>
        <div>
          <input
            className="clientparams"
            type="text"
            placeholder="Client Id"
            readOnly="true"
          />
        </div>
        <div>
          <input
            className="clientparams"
            type="text"
            placeholder="Client Secret"
            readOnly="true"
          />
        </div>

        <div>
          <select
            className="clientparams"
            defaultValue="Active"
            onChange={(e) => (this.state.status = e.target.value)}
            onSubmit={this.onChange}
          >
            <option value="Active">Active</option>
            <option value="Inactive">Inactive</option>
          </select>
          <p></p>
        </div>

        <input className="btn" type="button" value="Save Client" onClick={this.post.bind(this)}/>
        
      </form>
    );
  }
}

In the above code,The ApiDropdown component needs to be shown in full screen instead of just a small box at the start of the row.

My select css:

.select {
  cursor:pointer;
  display:inline-block;
  position:relative;
  font:normal 11px/22px Arial, Sans-Serif;
  color:black;
  border:1px solid #ccc;
  width: 50%;
  height: 50%;
  
}

Answer 1

You have to use CSS to show your modal in a full screen.

Create a css like below:

.myModal {
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  background: 'white';
}

Then use it in your <ApiDropdown /> component main div class:

  render() {
    return (
      <div className="myModal">
        <select
          className="select"
          id="selectBox"
          multiple="multiple"
          onChange={this.changeFunc}
        >
          <option selected disabled className="option">
            Choose here
          </option>
          {this.state.options.map(
            (key, value) => (
              console.log(key["apis"]),
              (
                <>
                  <optgroup label={key["key"]} className="groupOpt">
                    <option
                      selected=""
                      value="Select All"
                      id={"Select All".concat(key["key"])}
                      class="option"
                      onClick={() =>
                        this.onClick(
                          key["key"],
                          "Select All".concat(key["key"])
                        )
                      }
                    >
                      Select All
                    </option>
                    {key["apis"].map((i, value) => (
                      <option
                        selected=""
                        className="option"
                        id={i}
                        value={i}
                        onClick={() => this.onClick(key["key"], i)}
                      >
                        {i}
                      </option>
                    ))}
                  </optgroup>
                </>
              )
            )
          )}
        </select>
        <div>
          {
            (console.log(this.state.saveflag),
            this.state.saveflag ? (
              <></>
            ) : (
              <button
                type="button"
                className="btn"
                onClick={e=> {
                  e.preventDefault();
                    this.props.data.handleApiGrants(apis);
                    this.setState({ saveflag: true });
                }}
              >
                Save
              </button>
            ))
          }
        </div>
      </div>
    );
  }
}