How to update state with setState before render

Question

I'll preface this by stating that I'm a complete beginner at React.js

I've created an example of a project I'm working on where I call an API in componentDidMount() and get an array of objects back, setting it in state. Here's what it looks like:

class App extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        thing: []
    }
}
componentDidMount() {
    // Fake API
    const apiCall = () => ({
      data: "test"
    })

    // Fake call
    const data = apiCall()

    this.setState({
        thing: [
            ...this.state.thing,
            data
        ]
    })
}
render() {
    return (
        <div>
            <h1>{ this.state.thing[0].data }</h1>
        </div>
    )
}

}

I'm aware that setState isn't guaranteed to update when it's used according to the documentation. I also found "forceUpdate()," and the docs recommends using it as little as possible. Nevertheless, I attempted to use it, but to no avail.

I'm able to console.log the new state during the componentDidMount() run and in the render's h1 element, but I'm unable to actually show it in the render since it's rendering an empty state array at first.

My question is: Is there a way to force my state to update before the render is run by my program so that I can see it, and if not, how would I be able to see my new state reflected in the JSX?

Answer 1

componentDidMount is called after the initial render and hence, at the time of initial render this.state.thing[0] is undefined and hence it would cause an error, you need to perform a conditional check before using this.state.thing[0].status

componentDidMount() {
    this.setState({
        thing: [
            {
                status: "running",
                test: "testing"
            }
        ]
    });
}

render() {
    return (
        <div>
            {this.state.thing.length > 0? <h1 className="mt-5 mb-5">{ this.state.thing[0].status }</h1>: null
}
            <button className="mt-5" onClick={ this.handleUpdate } value="not running">
                Click to change
            </button>
        </div>
    );
}