Submitted almost 2 years ago

React and tailwind with some basic animation

Hsienz•550

@Hsienz

Preview site View code

This is a solution for...Calculator app

HTML
CSS
JS

3intermediate

Design comparison

SolutionDesign

Solution retrospective

I spend some time on how to use tailwind styled component. It make my code so clean.

I want to ask

If there is a way to set dynamic className, like className={`text-${props.textColor}`}

Thank for any feekback!!

Community feedback

Eileen dangelo•1,600

@EileenpkPosted almost 2 years ago

Hi Hsienz, great job on this project!

If I was going to set a dynamic className in React I would employ the useState hook. When the state should change (like onClick) set the state to the desired class.

import { useState } from 'react';

function MyComponent() {
  const [className, setClassName] = useState('initial');

  const handleClick = () => {
    setClassName(prevClassName => prevClassName === 'initial' ? 'changed' : 'initial');
  }

  return (
    <div>
      <div className={className}>This is the div whose className will change</div>
      <button onClick={handleClick}>Change className</button>
    </div>
  );
}

Hope you found this helpful!

Let's connect on LinkedIn! - @Eileenpk

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord