3

I want to create a function which iterate over all element with same class and remove a specific class.

It could be done easily using JavaScript.

const boxes = document.querySelectorAll(".box1");
function remove_all_active_list() {
    boxes.forEach((element) => element.classList.remove('active'));
}

But how can I do this similar thing is ReactJs. The problem which I am facing is that I can't use document.querySelectorAll(".box1") in React but, I can use React.createRef() but it is not giving me all elements, it's only giving me the last element.

This is my React Code

App.js

import React, { Component } from 'react';
import List from './List';

export class App extends Component {

    componentDidMount() {
        window.addEventListener('keydown', this.keypressed);
    }

    keypressed = (e) => {
        if (e.keyCode == '38' || e.keyCode == '40') this.remove_all_active_list();
    };

    remove_all_active_list = () => {
        // boxes.forEach((element) => element.classList.remove('active'));
    };

    divElement = (el) => {
        console.log(el);
        el.forEach((element) => element.classList.add('active'))
    };

    render() {
        return (
            <div className="container0">
                <List divElement={this.divElement} />
            </div>
        );
    }
}

export default App;

List.js

import React, { Component } from 'react';
import data from './content/data';

export class List extends Component {
    divRef = React.createRef();

    componentDidMount() {
        this.props.divElement(this.divRef)
    }

    render() {
        let listItem = data.map(({ title, src }, i) => {
            return (
                <div className="box1" id={i} ref={this.divRef} key={src}>
                    <img src={src} title={title} align="center" alt={title} />
                    <span>{title}</span>
                </div>
            );
        });
        return <div className="container1">{listItem}</div>;
    }
}

export default List;

Please tell me how can I over come this problem.

Improve this question

3 Answers 3

Reset to default
12

The short answer

You wouldn't.

Instead you would conditionally add and remove the class to the element, the component, or to the collection.map() inside your React component.

Example

Here's an example that illustrates both:

import styles from './Example.module.css';

const Example = () => {
  const myCondition = true;

  const myCollection = [1, 2, 3];

  return (
    <div>
      <div className={myCondition ? 'someGlobalClassName' : undefined}>Single element</div>
      {myCollection.map((member) => (
        <div key={member} className={myCondition ? styles.variant1 : styles.variant2}>
          {member}
        </div>
      ))}
    </div>
  );
};

export default Example;

So in your case:

  • You could pass active prop to the <ListItem /> component and use props.active as the condition.

  • Alternatively you could send activeIndex to <List /> component and use index === activeIndex as the condition in your map.

Explanation

Instead of adding or removing classes to a HTMLElement react takes care of rendering and updating the whole element and all its properties (including class - which in react you would write as className).

Without going into shadow dom and why react may be preferable, I'll just try to explain the shift in mindset:

Components do not only describe html elements, but may also contain logic and behaviour. Every time any property changes, at the very least the render method is called again, and the element is replaced by the new element (i.e. before without any class but now with a class).

Now it is much easier to change classes around. All you need to do is change a property or modify the result of a condition (if statement).

So instead of selecting some elements in the dom and applying some logic them, you would not select any element at all; the logic is written right inside the react component, close to the part that does the actual rendering.

Further reading

https://reactjs.org/docs/state-and-lifecycle.html

Please don't hessitate to add a comment if something should be rephrased or added.

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

2 Comments

can you please explain it more i didn't understand
@ArpitFalcon I added an explanation in my own words trying to explain the mindset shift and added a link for further reading. Let me know if this helps you understand the answer to your question better.
1

pass the ref to the parent div in List component.

...
componentDidMount() {
    this.props.divElement(this.divRef.current)
  }
  ...
<div ref={this.divRef} className="container1">{listItem}</div>

then in App

divElement = (el) => {
        console.log(el);
        el.childNodes.forEach((element) => element.classList.add('active'))
    }

hope this will work. here is a simple example https://codesandbox.io/s/staging-microservice-0574t?file=/src/App.js

Improve this answer

3 Comments

This is a naive approach and misses the point of react entirely.
@Webber i agree with you, but the question wasn't about the approach to handle classes in react, it was about how can he add or remove some class.
I understand, but adding an "active class" is essentially a textbook example of what react excels in. I would consider this a failed opportunity to help someone learn by offering a hack that will most likely not end up saving time at all.
0

App.js

import React, { Component } from "react";
import List from "./List";
import "./styles.css";
export class App extends Component {
  state = { element: [] };
  ref = React.createRef();
  componentDidMount() {
    const {
      current: { divRef = [] }
    } = this.ref;
    divRef.forEach((ele) => ele?.classList?.add("active"));
    console.log(divRef);
    window.addEventListener("keydown", this.keypressed);
  }

  keypressed = (e) => {
    if (e.keyCode == "38" || e.keyCode == "40") this.remove_all_active_list();
  };

  remove_all_active_list = () => {
    const {
      current: { divRef = [] }
    } = this.ref;

    divRef.forEach((ele) => ele?.classList?.remove("active"));
    // boxes.forEach((element) => element.classList.remove('active'));
    console.log(divRef);
  };

  render() {
    return (
      <div className="container0">
        <List divElement={this.divElement} ref={this.ref} />
      </div>
    );
  }
}

export default App;

List.js

import React, { Component } from "react";
import data from "./data";

export class List extends Component {
  // divRef = React.createRef();
  divRef = [];

  render() {
    let listItem = data.map(({ title, src }, i) => {
      return (
        <div
          className="box1"
          key={i}
          id={i}
          ref={(element) => (this.divRef[i] = element)}
        >
          <img src={src} title={title} align="center" alt={title} width={100} />
          <span>{title}</span>
        </div>
      );
    });
    return <div className="container1">{listItem}</div>;
  }
}

export default List;

Create ref for List component and access their child elements. When key pressed(up/down arrow) the elements which has classname as 'active' will get removed. reference

Improve this answer

1 Comment

yes, but i just added a solution for his requirement. he asked to clear all active class of a element when keypress. reference

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.