import React, { useState } from 'react';

// Example characters array as props for demonstration const charactersData = [ { name: 'Gandalf', isWizard: true }, { name: 'Harry', isWizard: true }, { name: 'Aragorn', isWizard: false } ];

// in der Component CharacterList function CharacterList({ characters }) { const [showOnlyWizards, setShowOnlyWizards] = useState(false);

function handleFilterClick() { setShowOnlyWizards(!showOnlyWizards); }

let visibleCharacters; if (showOnlyWizards) { visibleCharacters = characters.filter(function(character) { return character.isWizard === true; }); } else { visibleCharacters = characters; }

return ( <div> <button onClick={handleFilterClick}> {showOnlyWizards ? 'Alle anzeigen' : 'Nur Zauberer anzeigen'} </button> <ul> {visibleCharacters.map(function(character) { return <li key={character.name}>{character.name}</li>; })} </ul> </div> ); }

// in App.jsx export default function App() { return <CharacterList characters={charactersData} />; }