Adding Transition Effect to JSX Component in React

Question

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?

import React, { useState } from 'react';
import ChatItem from './ChatItem';
import ChatButton from './assets/ChatButton';
import classes from './ChatBot.module.css';

const ChatList = (props) => {
  const [selected, setSelected] = useState(props.items[0]);

  function handleChangeSelected(item) {
    setSelected(item);
  }

  const questionButtons = props.items.map((item) => {
    if (item.id === selected.id) return null;
    return (
      <ChatButton onClick={handleChangeSelected.bind(null, item)}>
        {item.question}
      </ChatButton>
    );
  });

  return (
    <div className={classes.faq}>
      <section className="textbox">
        <ChatItem
          key={selected.id}
          id={selected.id}
          question={selected.question}
          answer={selected.answer}
        />
      </section>
      <div className={classes.questions}>{questionButtons}</div>
    </div>
  );
};

export default ChatList;

RoTra · Accepted Answer · 2022-03-29 13:36:26Z

1

It is possible with some sort of library like react transition group. But I think it might be easier to apply a className for this if it's not a complex animation. Then apply your transition on the button. If in the way you could use visibility.

<ChatButton className={item.id === selected.id && 'active'} onClick={handleChangeSelected.bind(null, item)}>
   {item.question}
</ChatButton>

answered Mar 29, 2022 at 13:36

RoTra

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding Transition Effect to JSX Component in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related