React component syntax using HTML and CSS

Question

Attempting to create a simple like/unlike component with React. How can I render this component with <i class="fal fa-thumbs-down"> markup and classes to style the icons? My syntax here is off somewhere.

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return (
        <i class="fal fa-thumbs-down"></i>
        { onClick: () => this.setState({ liked: false }) }
      );
    }

    return (
      <i class="fal fa-thumbs-up"></i>
      { onClick: () => this.setState({ liked: true }) }
    );
  }
}

Nathan · Accepted Answer · 2022-09-16 19:09:16Z

1

return (
   <i class="fal fa-thumbs-down" onClick={ () => this.setState({ liked: !this.state.liked}) } />
)

I made three changes:

onClick is a prop passed to i, just like class is.
i is now self-closing
instead of conditionally rendering, the logic in onClick is conditional (it flips the existing state when clicked)

Also, I'd strongly recommend switching over to functional components instead of class components. They're much cleaner (and more fun!) to work with.

answered Sep 16, 2022 at 19:09

Nathan

79.4k15 gold badges55 silver badges103 bronze badges

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

2 Comments

noclist Over a year ago

Any idea why I'd get Unexpected token '<' on the i?

Nathan Over a year ago

@noclist Are you sure you're using the file extension .jsx, not .js? JSX is a superset of JavaScript, and you need to be using JSX to use the embedded html tags.

Collectives™ on Stack Overflow

React component syntax using HTML and CSS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related