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

Lin Du · Accepted Answer · 2021-12-29 02:44:02Z

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} />;
  }
}

edited Dec 29, 2021 at 2:44

answered Dec 29, 2021 at 2:36

Lin Du

104k138 gold badges340 silver badges575 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

in.k Over a year ago

Thank you for your quick response. Just a clarification. CompanyProfile.jsx and CompanyProducts.jsx are 2 components that are fetching a url each and then the result is displayed in a page e.g. search.jsx. Instead of data sent to search from 2 different pages, how to get the same result by fetching both urls from a single component and then exporting and display it in search.jsx.

in.k Over a year ago

I had asked a question with full code but there was no correct answer so I shortened the question in this one. stackoverflow.com/questions/70501141/…

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related