ReactJS: setState from outside

Question

This is my App.js

import React from 'react';
import './App.css'
import Tools from './components/class/Tools'
import Loading from './components/inc/Loading'

export default class App extends React.Component {
    componentDidMount() {
        Tools.showLoading();
    }

    render() {  
        return (
            <div className="App">
                <Loading />
            </div>
        )
    }
}

Loading.js:

import React from 'react'

export default class Loading extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            display: 'none'
        }
    }

    render() {
        return (
            <div className="loading" style={{display: this.state.display}}>
                <span></span>
            </div>
        )
    }
}

I want change display of Loading from Tools.js:

export default class Tools extends React.Component {
    static showLoading(){ // or non-static
        Loading.setState ...
    }
}

How I can access and setState variable from another class or function or outside?

See also: [How do I set state of sibling components easily in React?](https://stackoverflow.com/q/30845910/1218980) — Emile Bergeron, Jun 17 '21 at 14:33
If your `Tools` need to directly access `Loading`, then your component is not very reusable since `Tools` only works if it has access to a `Loading` component. — Ruan Mendes, Jun 17 '21 at 14:34
Other example: [What's the right way to pass form element state to sibling/parent elements?](https://stackoverflow.com/q/24147331/1218980) — Emile Bergeron, Jun 17 '21 at 14:34
@JuanMendes I'm so sorry. components are not sibling. i edit my question. please check again — user3612383, Jun 17 '21 at 14:40

Luke Storry · Answer 1 · 2021-06-17T15:03:56.783

1

Your Loading and Tools components are siblings, so it is harder to pass data between them.

You should pull the state out to the parent App component, then you can pass in the setState callback method and the state.loading variable into the Tool and Loading components as a prop.

Or you can re-use your Loading component within all the other components, like so:

export default class Tool extends React.Component {

 constructor(props) {
        super(props)

        this.state = {
            loading: true
        }
    }

    render() {
        return (
            <Loading isloading={loading}>
            <div>
            // content here
            </div>
        )
    }
}

edited Jun 17 '21 at 15:03

answered Jun 17 '21 at 14:29

Luke Storry

6,032
1
9
22

I'm so sorry. components are not sibling. i edit my question. please check again – user3612383 Jun 17 '21 at 14:40
You can't just call a static method from a non-mounted React.Component class, I'm unsure what you're trying to achieve here? – Luke Storry Jun 17 '21 at 14:44
I have ye loading componenet. this component use whole project and i want every where and every time change this display. i dont want duplicate codes. Generally, i want create loading and use it repeatedly every where. (app.js, components, classes or ... ) – user3612383 Jun 17 '21 at 14:47

ReactJS: setState from outside

1 Answers1