How to add additional api to a fetch component in React JS

Question

There are 2 separate components that fetch data through api. The code below is for the first component and then there is another component that fetch other data of the same company through another api and the code of that one is exactly the same except the api link. How to fetch the data from the other api in this component so there is no need for 2 different components.

import React, { Component, Fragment } from 'react'
import axios from 'axios'


class CompanyProfile extends Component {

     constructor(){
          super();
          this.state={
               Company:[]

                              
          }
     }

     componentDidMount(){
          axios.get('http://localhost:3000/link').then(response =>{
**/////////for example axios.get('http://localhost:3000/link2') added here.**                   
                   this.setState({Company:response.data});         
   


          });
     } 
  
     render() {

          const cp = this.state.Company;
          const CompanyView = contact.map((cp,i)=>{
**/////then mapped here.**

               return  <div>

      <p>{cp.name}</p>
      <p>{cp.type}</p>
      <p>...other data</p>
**//// and then displayed here <p>{cp.CompanyProducts.data}</p>**
                 </div>
    
              });
    
              return (
        
     <div>
               {CompanyView}
 
    </div>

          )
     }
}

export default CompanyProfile

Answer 1

I am not sure about your question. We can use container and presentational components.

A container does data fetching and then renders its corresponding sub-component. That’s it.

Refactor the CompanyProfile component to a stateless presentational component. Pass the company data from the remote API server to it from the container component.

So that we can reuse the CompanyProfile component.

CompanyProfile.jsx:

import React, { Component } from 'react';

class CompanyProfile extends Component {
  render() {
    const { campany } = this.props;
    const CompanyView = campany.map((cp, i) => {
      return (
        <div>
          <p>{cp.name}</p>
          <p>{cp.type}</p>
          <p>...other data</p>
          <p>{cp.CompanyProducts.data}</p>
        </div>
      );
    });

    return <div>{CompanyView}</div>;
  }
}

export default CompanyProfile;

Parent1.tsx:

import React, { Component } from 'react';
import axios from 'axios';
import CompanyProfile from './CampanyProfile';

export default class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      company: [],
    };
  }
  componentDidMount() {
    axios.get('http://localhost:3000/link').then((response) => {
      this.setState({ company: response.data });
    });
  }

  render() {
    return <CompanyProfile company={this.state.company} />;
  }
}

Parent2.jsx:

import React, { Component } from 'react';
import axios from 'axios';
import CompanyProfile from './CampanyProfile';

export default class Parent2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      company: [],
    };
  }
  componentDidMount() {
    axios.get('http://localhost:3000/link2').then((response) => {
      this.setState({ company: response.data });
    });
  }

  render() {
    return <CompanyProfile company={this.state.company} />;
  }
}