javascript - How to move modal into its own component from current component

Question

How to make separate component for modal which depends on an API call in current component in React

I have the following API call

class Designs extends Component {
//after constructor I have a function which makes an api call:
async componentDidMount() {
    const designs = await axios.get(`${DESIGN}`);
    this.setState({ rawDesigns: designs.data.documents }); //rawDesigns is an array

And I have the following modal in the render method

render() {
    const {
      designs,
      showModal,
      selectedDesign,
      rawDesigns,
      currentStep,
    } = this.state;

return(
 {showModal && (
          <Modal toggleModal={this.togglePageModal} pageModal={true}>
            <h2 style={{ textAlign: "center", width: "100%" }}>
              {rawDesigns[selectedDesign].name}
            </h2>
            <span
              style={{
                textAlign: "center",
                width: "100%",
                letterSpacing: "3px !important",
                fontWeight: "bold",
                color: "#5252ED",
                marginTop: "5px"
              }}
            >
              {currentStep === 1 && `BASIC DETAILS`}
              {currentStep === 2 && `ARCHITECTURE`}
              {currentStep === 3 && `TEAMS`}
            </span>
            <DotSteps
              totalSteps={3}
              currentStep={currentStep}
              onChange={currentStep => this.setState({ currentStep })}
              className="flex-jfe"
            />
            {currentStep === 1 && (
              <div className="w-100 flex flex-col">
                <ContentCard>
                  <span style={{ color: "#5252ED", fontWeight: "bold" }}>
                    Type
                  </span>
                  <h3 className="mt0">{rawDesigns[selectedDesign].type}</h3>
                </ContentCard>

As you can see this modal uses the state variables as well as info from the api call in the Designs component. Is it possible for me to create a separate component for this modal and then use it in the render method in Designs?

question from:https://stackoverflow.com/questions/65889574/how-to-move-modal-into-its-own-component-from-current-component

Answer 1

React Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

https://reactjs.org/docs/portals.html