OnHover CSS

🙋Get Help
1

I am trying to port over some parts of the argon react js ui kit but for some reason the elements which change their styling due to css hover, don’t show. For example in this minimal repo (patched together on my phone so it might have import errors) https://bit.ly/2Yu21JE

The TestPage component, should display a nav bar which both the Components and the Examples

Should display their drop down both on click (this works) and also it’s on hover (doesn’t work)

On a side note: what is the correct way to get the state in a class component?

3

Hi @loscar9

Can you set this up on codesandbox so we can see the code for your project and see the execution. Alternatively please provide a link to a project repo so that we can clone it. Thanks.

4

Hi Micheal, I decided against using this kit in the end as it gave more issues than solutions. I have now got an on hover working.

I didn’t realise that gists couldn’t be cloned - sorry!

I am still unsure about the correct way to access state in a class component?

5

Hi @loscar9

Connect the class component using the connect HOC. As connect adds the state , actions and libraries props they should be available in this.props inside all of the class component’s methods.

See the docs here for more info.

6

I’ve created this demo to show the use of class-based React components in a Frontity project and how you can access the state from within a class-based component.

Usually when working with Frontity, or any modern React-based framework, you would use function-based React components.

The demo is based on the standard mars-theme. The differences are:

  1. There’s a new route added to the menu in frontity.settings.js (lines 36 - 39) for testing the new class-based component.

  2. A new property state.theme.ccString has been added to index.js (line 23), which will be used later to demonstrate how we can access properties in the state from within the class-based component.

  3. A new file class-component.js contains a new component created as a class-based component rather than a function-based component. Note that:

    a. You need to import React (line 1);
    b. Class-based components must have a render() function;
    c. You need to import the HOC connect (line 2) and connect the class-based component to the state (line 16) when exporting it;
    d. You can then access properties in the state using this.props within the class-based component (line 9 accesses state.router.link and line 10 accesses state.theme.ccString, the custom property we added above ).

  4. The class-based component is imported normally into index.js (line 9) and then rendered depending on the value of state.router.link (line 44).

Here, for convenient reference, is the code for the class-based component used in the demo:

import React from 'react'
import { connect } from 'frontity'

class ClassComponent extends React.Component {
  render() {
    return (
      <>
        <h2>This page is rendered by a class-based component</h2>
        <p><em>Current path:</em> {this.props.state.router.link}</p>
        <p><em>Value of 'state.theme.ccString':</em> {this.props.state.theme.ccString}</p>
      </>
    )
  }
}

export default connect(ClassComponent)