<div id="root"></div>
function App() {
  const [who, setWho] = React.useState('🐼')
  return (
    <div>
      <div>💪{ who }👊</div>

      <button onClick={
        function() {
          setWho('🐼')
        }
      }>Панда</button>
      
      <button onClick={
        function() {
          setWho('🐯')
        }
      }>Тигрица</button>
      
      <button onClick={
        function() {
          setWho('🐵')
        }
      }>Обезьяна</button>
      
      <button onClick={
        function() {
          setWho('🐷')
        }
      }>Хрюшка</button>
      
      
    </div>
  )
}

ReactDOM.render(<App/>, document.getElementById('root'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js