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>
)
}

}

Please add what you tried by showing code snippets. Where exactly you are facing problems and all. Your question has to be very descriptive so that SO contributors can actually help you out. — Lakshya Thakur

twominds twominds · Accepted Answer · 2021-01-25T09:23:38

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>

Back button does not get enabled again after disabling

1 Answers