title: Adding Transition Effect to JSX Component in React
body: <p>I would like to add a transition effect when the button is clicked in the following React component but as this code changes the actual JSX content rather than the className I don't think this can be done in CSS. How can I add a transition effect in this case?</p>
  <pre><code>import React, { useState } from 'react';
  import ChatItem from './ChatItem';
  import ChatButton from './assets/ChatButton';
  import classes from './ChatBot.module.css';
  
  const ChatList = (props) =&gt; {
    const [selected, setSelected] = useState(props.items[0]);
  
    function handleChangeSelected(item) {
      setSelected(item);
    }
  
    const questionButtons = props.items.map((item) =&gt; {
      if (item.id === selected.id) return null;
      return (
        &lt;ChatButton onClick={handleChangeSelected.bind(null, item)}&gt;
          {item.question}
        &lt;/ChatButton&gt;
      );
    });
  
    return (
      &lt;div className={classes.faq}&gt;
        &lt;section className=&quot;textbox&quot;&gt;
          &lt;ChatItem
            key={selected.id}
            id={selected.id}
            question={selected.question}
            answer={selected.answer}
          /&gt;
        &lt;/section&gt;
        &lt;div className={classes.questions}&gt;{questionButtons}&lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default ChatList;
  </code></pre>