CODEWITHSUNDEEP
javascriptreactjsstate
PainIsAMaster
PainIsAMaster

Reputation: 2076

Reactjs change state in App.js from external function

in my App.js I have a state for a variable this:

App.js

class App extends Component {
constructor(props) {
    super(props);

    this.state = {
        httpStatus: false
        }

    // react crap code below

    render() {
        return (
        // blah blah blah blah components
        );
    }
}

Then, in a sub folder directory within src, I have a folder path fetch>updateHttp with a javascript file called updatehttp.js that simply has a function (its just a function, not a class or component) that needs to edit/update the state of that httpStatus variable:

updatehttp.js

updateHttp = () => {
    this.setState({
    httpStatus: true
})

export default updateHttp;

Is there an easy way to grab the state from the parent class (App.js) in this class and simply update it from the external function? I keep getting an error in the function for no-undef and I'm pretty certain its because the this.setState... call in the updateHttp function is not doing anything since it cannot grab the state object that is present in App.js.

I'm mostly familiar with Backend Java, so I'm new to React.

Upvotes: 1

Views: 822

Answers (2)

Stack Undefined
Stack Undefined

Reputation: 1330

If this is a production code, I would recommend keeping business/infrastructure logic off of the App.js.

App.js

import React from 'react';
import GetResponseCode from "./GetResponseCode";

const App = () => {
  return (
      <>  
        <GetResponseCode/>
      </>
  );
}

export default App;

GetResponseCode.js

import React, {useState} from 'react';
import getDataFromAPI from './getDataFromAPI';

const GetResponseCode = () => {
    const [responseCode, setResponseCode] = useState("") 

    const requestData = () => {
        setResponseCode(getDataFromAPI());
    }

    return (
        <div>
            <h3>Response code: {responseCode} </h3>
            <button onClick={requestData}>Get Data</button>
        </div>
    )
}

export default GetResponseCode;

getDataFromApi.js

const getDataFromAPI = () => {
    //call the Api
    //lines below just randomly simulate response code from Api
    const httpCodes = ["200","400","404","500"];
    return httpCodes[Math.floor(Math.random()*httpCodes.length)];
}

export default getDataFromAPI;

Upvotes: 2

Brian Patterson
Brian Patterson

Reputation: 1625

Are you able to just merge that function into your current App Component? That would seem the right thing to do here. See the mock code below for an example of how to do that.

class App extends Component {
      constructor(props) {
        super(props);

        this.state = {
            httpStatus: false
        }

        this.handleClick = this.handleClick.bind(this);
        this.updateHttp = this.updateHttp.bind(this);

      }

      handleClick(e) {
        if (someCondition == true) {
            this.updateHttp();
        }
      }

      updateHttp() {
        this.setState({
          httpStatus: true
        });
      }

      render() {
        return (
          <SomeComponent onClick={this.handleClick} />
        );
      }
}

Upvotes: 0

Related Questions