title: How to move modal into its own component from current component
body: <p>How to make separate component for modal which depends on an API call in current component in React</p>
  <p>I have the following API call</p>
  <pre><code>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
  </code></pre>
  <p>And I have the following modal in the render method</p>
  <pre><code>render() {
      const {
        designs,
        showModal,
        selectedDesign,
        rawDesigns,
        currentStep,
      } = this.state;
  
  return(
   {showModal &amp;&amp; (
            &lt;Modal toggleModal={this.togglePageModal} pageModal={true}&gt;
              &lt;h2 style={{ textAlign: &quot;center&quot;, width: &quot;100%&quot; }}&gt;
                {rawDesigns[selectedDesign].name}
              &lt;/h2&gt;
              &lt;span
                style={{
                  textAlign: &quot;center&quot;,
                  width: &quot;100%&quot;,
                  letterSpacing: &quot;3px !important&quot;,
                  fontWeight: &quot;bold&quot;,
                  color: &quot;#5252ED&quot;,
                  marginTop: &quot;5px&quot;
                }}
              &gt;
                {currentStep === 1 &amp;&amp; `BASIC DETAILS`}
                {currentStep === 2 &amp;&amp; `ARCHITECTURE`}
                {currentStep === 3 &amp;&amp; `TEAMS`}
              &lt;/span&gt;
              &lt;DotSteps
                totalSteps={3}
                currentStep={currentStep}
                onChange={currentStep =&gt; this.setState({ currentStep })}
                className=&quot;flex-jfe&quot;
              /&gt;
              {currentStep === 1 &amp;&amp; (
                &lt;div className=&quot;w-100 flex flex-col&quot;&gt;
                  &lt;ContentCard&gt;
                    &lt;span style={{ color: &quot;#5252ED&quot;, fontWeight: &quot;bold&quot; }}&gt;
                      Type
                    &lt;/span&gt;
                    &lt;h3 className=&quot;mt0&quot;&gt;{rawDesigns[selectedDesign].type}&lt;/h3&gt;
                  &lt;/ContentCard&gt;
  </code></pre>
  <p>As you can see this modal uses the state variables as well as info from the api call in the <code>Designs</code> component. Is it possible for me to create a separate component for this modal and then use it in the render method in <code>Designs</code>?</p>