title: reactjs - pass different props to the same component
body: <p>Hello I have a challenge figuring out how I can extend and add extra props to the page. This below code snippet works just fine, and it populates basic text.</p>
  
  <pre><code>import React from 'react';
  import { Text } from '@whatever-library';
  
  const SomeComponent = (props) =&gt; (
    &lt;div&gt;
      &lt;Text field={props.fields.heading} /&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>So now I would like to add data from an external API to render in this same component. Below is a snippet from another .js file that is working and displaying content from the api fetch, how can I combine those two</p>
  
  <pre><code>    class apiFetch extends SomeComponent {
        constructor(props) {
          super(props);
          this.state = {
            data: [],
            isLoaded: false,
          }
        }
  
        componentDidMount() {
          fetch('')
          .then(res =&gt; res.json())
          .then(json =&gt; {
            console.log(json);
            this.setState({isLoaded: true, data: json.data});
          });
  
        }
  
          render() {
          var { isLoaded, data} = this.state;
          if (!isLoaded) {
            return &lt;div&gt;Loading...&lt;/div&gt;;
          }
  
          else{
            return (
              &lt;div className="apiFetch"&gt;
   &lt;ul&gt;
                  {data.map(data =&gt; (
                    &lt;li key="{data.id}"&gt;Text:{data.text.more}&lt;/li&gt; 
                  ))}
                &lt;/ul&gt;
              &lt;/div&gt;
            );
          }
        }
  </code></pre>
  
  <p>Any help or direction would be nice.</p>