Split up functionalities across project in React?

Alright so I’m new to React, and have made an application which gets some data from an API and stores it into a table. It worked, but most of the code was in a single file which irritated me a lot. Now I’m trying to split it across multiple files, but without much luck as of yet.

I followed an answer which said I could just create a APIManager and use the following code:

import React from 'react';

const base_url = 'https://europe-west1-single-router-309308.cloudfunctions.net/GET?';

export let buildURL = (offset, pagination, product_name, store_name) => {
    [...]
}

However this gives me a TypeError: Object(...) is not a function. I tried it with a plain function, export function, and this, but nothing works. Should I make a component out of it? This is where the code gets called:

<div className='header'>
          <Form handleSubmit={(offset, pagination, product_name, store_name) => {buildURL(offset, pagination, product_name, store_name)}}/>
</div>

Answer

Alright, with the help of @digitalbreed I managed to fix it! I changed

import buildURL from './src/managers/APIManager';

import * as APIManager from './src/managers/APIManager';

and changed my reference to the code from

<Form handleSubmit={(offset, pagination, product_name, store_name) => { APIManager.buildURL(offset, pagination, product_name, store_name)}}/>

<Form handleSubmit={() => this.handleSubmit(offset, pagination, product_name, store_name)}/>

with

handleSubmit(offset, pagination, product_name, store_name){
  var url = APIManager.buildURL(offset, pagination, product_name, store_name);

And it works fine now. Thanks for the help, digitalbreed!

Advertisement

Answer