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 ( {showOnlyWizards ? 'Alle anzeigen' : 'Nur Zauberer anzeigen'} {visibleCharacters.map(function(character) { return {character.name}; })} ); }
// in App.jsx export default function App() { return ; }