export function inside react component or access state in same file outside of component

Question

I have a function that needs to be exported from the file, but at the same time, I need to utilize react state to re-render when updated.

It doesn't quite seem like it possible to export a function from inside of the class, so how can I update state from a function outside of the class?

import React, {Component} from 'react';

export function functionName(){
const filter = some filter;
  this.setState({
    filter: newFilter
  })
}

class ClassName extends Component{
  constructor(){
    super();
    this.state = {
      filter: {}
    }
  }
  render(){
    <>
    </>
  }
}

Answer 1

You can export functionName to the outside, but you won't have an access to this.setState inside that function.

So you might want to make it pure, return a new state. Refer to this tip by Dan Abramov - https://twitter.com/dan_abramov/status/824308413559668744?lang=en

So let's do something fun by making that functionName reusable by following Dan's tip.

---

You can follow along with a working demo below.

---

In the code below, increment & decrement matches to functionName from your post. A function to update the state (but actually returns a new state).

Counter matches your ClassName, within which, you want to re-use the function you are exporting.

The way to re-use the exported functions is by calling this.setState within Counter (refer to handleIncrement/handleDecrement).

import React, { Component } from "react";

// https://twitter.com/dan_abramov/status/824308413559668744/photo/1
export const increment = (state, props) => ({
  value: state.value + 1
});
export const decrement = (state, props) => ({
  value: state.value - 1
});

class Counter extends Component {
  state = { value: 0 };

  handleIncrement = () => this.setState(increment);
  handleDecrement = () => this.setState(decrement);

  render() {
    const { value } = this.state;

    return (
      <>
        <h1>Counter.jsx: {value}</h1>
        <button onClick={this.handleIncrement}>+</button>
        <button onClick={this.handleDecrement}>-</button>
      </>
    );
  }
}

export default Counter;

Now Counter, increment, and decrement are exported and can be imported elsewhere.

import React, { useState } from "react";
import Counter, { increment, decrement } from "./Counter";

function App() {
  const [count, setCount] = useState({ value: 0 });

  //                      ... Being reused! 👇
  const handleIncrement = () => setCount(increment);
  const handleDecrement = () => setCount(decrement);

  return (
    <div className="App">
      <section>
        <h1>App: {count.value}</h1>
        <button onClick={handleIncrement}>+</button>
        <button onClick={handleDecrement}>-</button>
      </section>

      <section>
       {/* 👇 We can use the counter as it is */}
        <Counter />
      </section>
    </div>
  );
}

You can import it in another file, and use Counter to use as it is, or re-use increment/decrement inside a Function Component as well.

That means, you can use the same logic in both Class AND Function Components! 😎