CODEWITHSUNDEEP
javascriptreactjstypescriptreact-hooksreact-props
Avinash Dalvi
Avinash Dalvi

Reputation: 9301

How to use props value in non component class which imported in component in React

I would like to access this.props.apiendpoint in api.js which imported in test.js which is component base class.

# api.js
import axios from 'axios';
export function fetchData(){
   return axios.post(apiendpoint);
}

# App.js
import test from test.js
export default class App extends Component {
  constructor() {
    this.apiendpoint = 'api.example.com';
  }
   
  render() {
    <test apiendpoint = {apiendpoint} />
  }
}


# test.js
import PropTypes from 'prop-types';
import {fetchData}  from api.js;

const test = ({
}) => {
   console.log(this.props.apiendpoint); // this value how to acccess in api.js 
   fetchData();
}
test.propTypes = {
apiendpoint: PropTypes.String,
}
test..defaultProps = {
apiendpoint : null,
}

like fetchData() I have many functions for API related passing apiendpoint for each function not good practice.

any help will be appreciated.

Upvotes: 1

Views: 163

Answers (1)

Tanishq
Tanishq

Reputation: 68

I would add apiEndPoint as an argument to fetchData function.

# api.js
import axios from 'axios';
export function fetchData(apiendpoint){
   return axios.post(apiendpoint);
}

And then call it from test.js by passing prop as a parameter.

import PropTypes from 'prop-types';
import {fetchData}  from api.js;

const test = ({
}) => {
   console.log(fetchData(this.props.apiendpoint));

}

Upvotes: 2

Related Questions