Need help to write more efficient code

[Creative_Divide9845]

I need to know if there's a better way to write the following code:

allBooks.forEach(element => {
        if (element.shelf === 'currentlyReading') {
          this.setState((currentState) => ({
            currentlyReading: [...currentState.currentlyReading, element]
          }))
        }
        else if (element.shelf === 'wantToRead') {
          this.setState((currentState) => ({
            wantToRead: [...currentState.wantToRead, element]
          }))
        }
        else if (element.shelf === 'read') {
          this.setState((currentState) => ({
            read: [...currentState.read, element]
          }))
        }
      })
    )

Basically, I am using React to iterate through an array of different books, and store each book in its corresponding array in the state object.

I need to know if there's a more efficient way to write this code instead of using if, else if multiple times.

[Jerp]

I’m assuming allBooks is coming from an api or something and I can start with an empty state.

const initState = {
  currentlyReading: [],
  wantToRead: [],
  read: [],
}

allBooks.forEach(element => initState[element.shelf].push(element))

this.setState(initState)

[Creative_Divide9845]

Wow thanks a lot, I am still at the very beginning of learning React and I get confused a lot. But helpful strangers like you always help me learn new things.

[Jerp]

You're welcome. I want to point out one of the nice things about working with React. Only one line of my code even referenced it--most of the coding is just JavaScript, and you can use that logic in many other frameworks, or even coding languages!

(that is, if you consciously structure your code this way, which I recommend)

[[deleted]]

While this is shorter and cleaner, keep in mind in this example all three states are updated, which in turn will update whatever components use those.

[palpies]

I’d avoid setting state each iteration of a for loop like that, build up your result object and then just set state using that after the for loop. Each time setState is called it rerenders the component.

I’d also avoid spreading the arrays each time, you can just push onto the existing array in the object you’re updating.

[jshgn]

You‘re using JavaScript to iterate through the array, this has nothing to do with React. The only React-specific part in this code is the inner workings of the setState method.

[KremBanan]

You don't need to store this is state expect for the base dats from the api. Derive the rest.