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: }); //rawDesigns is an array

And I have the following modal in the render method:

render() {
    const {
    } = this.state;

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

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 ?

Sure, why couldn’t you create a separate component and pass in the values you need?

Would I pass them as props? I’m confused about how I would use or edit the state of the Design component in a new component

Yes, you could pass in what you want as props, just like with any other React component. You’d need to come up with some standard props like “title”, “subtitle”. You could pass in a “body” prop that you could have it be text or a JSX element.