Back button does not get enabled again after disabling

Question

This the code I am using. The problem is that once the Back button get disabled it does not get enabled when I click the next button. Can someone help me figuring out what am I doing wrong here?

class App extends React.Component { constructor(props) { super(props) this.state = { data: [], start: 1, disabledNext: false, disabledBack: false

    }
}
componentDidMount() {
  this.displayImages(this.state.start)

}

displayImages(a){
    axios
    .get(`https://jsonplaceholder.typicode.com/photos/?_start=${a}&_limit=5`)
    .then(res => { 
        this.setState({
            data : res.data
        });
    }) 
}

handleBack = () => {
    let prev = this.state.start - 5
    let disabledBack = false
    if (prev <= 1){
        prev = 1
        disabledBack = true
    }
    this.setState({ start: prev , disabledBack: disabledBack })
    this.displayImages(prev)

};

handleNext = () => {
      let newStart = this.state.start + 5
      this.setState({ start: newStart })
      this.displayImages(newStart)
};


render() {
    const {  data , disabledBack } = this.state
    return(
    <div>
    {
        data.map(item => {
        return(
            <img src={item.thumbnailUrl} alt="img"/>
        )
    })
    }
    
    <br></br> <br></br>
    <button type="button" onClick={this.handleBack} disabled={disabledBack}>Back</button>
    <button type="button" onClick={this.handleNext} >Next</button>
    </div>
)
}

}

Answer 1

If you can understand how this prev and next btn works then you can do a lot in react.

Code: https://codesandbox.io/s/inventory-progress-u2v90

    const App = () => {
      const [state, setState] = useState([
        { item: "1", desc: "1", active: true },
        { item: "2", desc: "2", active: false },
        { item: "3", desc: "3", active: false }
      ]);
      const stateIndex = state.findIndex(function (item) {
        return item.active;
      });
      return (
        <div>
          {state.map((item) => {
            return (
              <p style={{ backgroundColor: item.active ? "red" : "gray" }}>
                {item.desc}
              </p>
            );
          })}
          <button
            onClick={() => {
              stateIndex > 0 &&
                setState([
                  ...state.map((item, iIndex) =>
                    iIndex === stateIndex
                      ? {
                          ...item,
                          active: false
                        }
                      : {
                          ...item,
                          active:
                            iIndex ===
                            stateIndex -
                              1
                              ? true
                              : false
                        }
                  )
                ]);
            }}
          >
            Prev
          </button>
          <button
            onClick={() => {
              stateIndex + 1 < state.length &&
                setState([
                  ...state.map((item, iIndex) =>
                    iIndex === stateIndex
                      ? {
                          ...item,
                          active: false
                        }
                      : {
                          ...item,
                          active:
                            iIndex ===
                            stateIndex  +
                              1
                              ? true
                              : false
                        }
                  )
                ]);
            }}
          >
            Next
          </button>
        </div>
      );
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>