Using another state for setState

[toxic depot]

https://playcode.io/1470303

I have an array of schoolClubs that contains 2 separate school clubs. I kept the logic simple. Each club array list the students in the very club.

I set the club index by the club state so that it will show the current club students. ıt starts with 0. By that club index, I create another students state and using it to create JSX.

When Change Club button is clicked, it is supposed to increment club state so that I can list the second club. For Line 15, the code works but is it correct to change the students state by the raw "club" state. I am nervous club state may not be current because I am incrementing it by a callback 1 line above?

I even tried to setStudents in setClub callback: https://playcode.io/1470340

I am not sure which one is correct way in React?

BTW, this is simplified code, I need to have club and students as states because I add or delete students from the students array and refresh the display. But when Change Club button clicked, it needs to increment club index and list the next default students from the schoolClubs array.

[naive swan]

👋 I think you might not be needed schoolClubs state you can still work with club state

https://playcode.io/1470461

[toxic depot]

Thank you for being so helpful. But as I stated, I need to have a separate students state. I am adding and removing students from this state by some buttons which I did not include in the example code for simplicity.

[naive swan]

Do you currently have the updated code which includes removing and adding student functionality ??

[slate horizon]

@toxic depot I think using a matrix is a good alternative to an array of object here where the object has the student name + club.

although I wouldn't use state for students, I would directly access the array using the club as the index:

const schoolClubs = [
  ["John","Marry","Paul","Jack"],
  ["Michael","Omen","Harry","Nick"]
]

export function App(props) {

  const [club, setClub] = useState(0);

  const changeClub = () => setClub(prevClub => prevClub + 1);

  const students = useMemo(() => schoolClubs[club],[club])

  return // etc...   

Although, we know you want to manipulate your matrix, so I would follow the same code above but now with state implemented:

const schoolClubs = [
  ["John","Marry","Paul","Jack"],
  ["Michael","Omen","Harry","Nick"]
]

export function App(props) {
  const [club, setClub] = useState(0);
  const [students, setStudents] = useState(schoolClubs)

  const changeClub = () => setClub(prevClub => prevClub + 1);

  const selectedStudents = useMemo(() => students[club],[club, students])

  return // etc...   

Another way to approach this is to flatten your 2 dimension matrix out into a single one (just use a plain array) where each entity is an object:

const schoolClubs = [
  { name: "John", club: 0, },
  { name: "Marry", club: 0, },
  { name: "Paul", club: 0, },
  { name: "Jack", club: 0, },
  { name: "Michael", club: 1, },
  { name: "Omen", club: 1, },
  { name: "Harry", club: 1, },
  { name: "Nick", club: 1, },
]

export function App(props) {
  const [club, setClub] = useState(0);
  const [students, setStudents] = useState(schoolClubs);

  const changeClub = () => setClub(prevClub => prevClub + 1)

  const selectedStudents = useMemo(() => {
    return students.filter(student => student.club === club)
  }, [club, students])

Using an array of objects will make your operations a little bit easier than the other approach but just pick the one you prefer.

[toxic depot]

Much appreciated, I normally use objects in the array but to simplify the code I omitted them. I used your useMemo algorithm and it fixed my problem. Thank you.