I’m starting to create a quizlet clone app using React.
I currently have 2 wordlists, and I added buttons to setState of which list is used in the component.

import React from 'react'
import ReactDOM from 'react-dom/client'
import RandomizedListCardsContainer from './RandomizedListCardsContainer'
import './index.css'
import { food, householdItems } from './Words-arrays/words';
import { useState, useEffect } from 'react';


function App() {
  const [selectedList, setSelectedList] = useState([]);

  function handleClick (list) {
    setSelectedList(list);
  }

  return (
    <div className="app">
      <div>
        <button onClick={() => handleClick(food)}>Food Words</button>
        <button onClick={() => handleClick(householdItems)}>Household Items</button>
      </div>      
      {selectedList.length > 0 && <RandomizedListCardsContainer wordlist={selectedList} />}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

On button click the state changes (I see it in console.log I used for debugging, but the <RandomizedList (…) /> doesn’t rerender.
I was trying to solve it for quite a long now and I don’t get it, chat also doesnt help 🙁