React JS How to Set State in One Component from Another Functional Component

Question

This is absolutely not a duplicate.

1. This question is a React question. The question that this is supposedly a duplicate of is straight JavaScript.

2. The problem was how i sent in my React function and not how i was referencing this or anything specific to "this".

3. This is actually very helpful as it shows how to update state in REACT!!! from one component to another which allows for more functional components which is a great thing for efficiency in REACT!!!!

So unfair.

This is absolutely not a duplicate.

Please remove the duplicate marking!

Here is the original question...

i have a couple of questions about some code i inherited. i work on an intranet so i have to type a sample of what i am asking about.

first question, i have a "class" like the following, is it a JS class or a React class? i assume React...

import React from 'react';

class SomeUtil {
  constructor() {
    this.doAbc = this.doAbc.bind(this)
  }

  doAbc(...){
    ...
  }
}
export default SomeUtil;

i noticed there is no super() - should i add that?

second question has to do with creating a similar class but i can't get it to work as i want.

import React from 'react';

class SomeOtherUtil {
  constructor(someCallback) {

    this.externalCallback = someCallback

    this.doXyz = this.doXyz.bind(this)
    this.doXxz = this.doXxz.bind(this)
    **//do i need to bind externalCallback here ?**
  }

  doXyz(...){
    this.externalCallback('hello world!')
  }

  doXxz(...){
    this.externalCallback('hello bob!')
  }
}
export default SomeOtherUtil;

now, when i use SomeOtherUtil i want to use it like this...

//inside a React Component
someRandomReactComponentMethod() {
  let myUtil = new SomeOtherUtil(this.someRandomCallback)
  myUtil.doXyz();
  myUtil.doXxz();
}

---

UPDATE

i figured out my problem. i was trying to do this...

//inside a React Component
someRandomReactComponentMethod() {
  let myUtil = new DataUtil(this.setState)
  myUtil.getThenSetData(...);
  myUtil.getAnotherWayAndSetData(...);
}

and i had to do this instead ...

//inside a React Component
someRandomReactComponentMethod() {
  let myUtil = new DataUtil((data)=>this.setState(data))
  myUtil.getThenSetData();
  myUtil.getAnotherWayAndSetData();
}

i'm still not convinced this is a duplicate of the question mentioned above but whatever.

Thanks for answering the first question about JS class vs React class. Wish i could give half a vote. :) i wasn't sure about my first question becausee react was imported at the top that it would get compiled into a react class or straight JS. Now i know. Also, in the past when i worked with JS objects i had to use prototype to make a new instance. So it was confusing to me.

Answer 1

first question, i have a "class" like the following, is it a JS class or a React class? i assume React...

React Components are JavaScript classes that extend React.Component. This example does not: it's just a class, and doesn't look like it implements the component interface.

//do i need to bind externalCallback here ?**

It depends on how it's called. If you are, for instance, responding to a click handler, you'll want to bind it so that the this value for the handler refers to the component rather than the clicked element.

Answer 2

first: no, you class does not extend any class, so you do not have to call super. I think you're confusing something like

class SomeComponent extends React.Component {
  constructor(props) {
    super(props)
    ...
  }
}

second, depends what you want the this context to be - if you want it to be SomeOtherUtil then yes, you need to bind it... but you probably don't.