CODEWITHSUNDEEP
reactjs
lomine
lomine

Reputation: 1171

React - dynamically and class name

demo

I'm adding text elements from and array and I like to loop through the elements and updated the claas name.

I'm selecting the elements with their current class name and I want to add the new class name as well.

Is it possible to add the new class name something like

element.className={'selected'}

=

import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

const App = () => {

  const colors = [
    'Red', 'Green', 'Blue', 'Brown', 'Yellow', 'Black'
  ]

  const loopFun = () => {
    for(let i=0; i<colors.length; i++){
      const element = document.getElementsByClassName('test-'+i)
      //element.className={'selected'} 
    }
  }

  return (
    <div className='titles'>
      {colors.map((color, i) => (
        <p key={i} className={'title-'+i}>{color}</p>
      ))}

      {loopFun()}

    </div>
  );
}

render(<App />, document.getElementById('root'));

Upvotes: 3

Views: 7884

Answers (2)

aviya.developer
aviya.developer

Reputation: 3603

const element = document.getElementsByClassName('test-'+i)

Shouldn't this be:

const element = document.getElementsByClassName('title-'+i)[0]

then just add:

element.classList.add('selected')

However it's considered bad practice to manipulate dom elements directly in react. You should use manipulation on the virtual-dom with the useRef hook.

Edit:

const App = () => {

  const colors = [
    'Red', 'Green', 'Blue', 'Brown', 'Yellow', 'Black'
  ]

  const loopFun = () => {
    for(let i=0; i<colors.length; i++){
      const element = document.getElementsByClassName('title-'+i)[0]
      console.log(element)
      element.classList.add('selected')
    }
  }

  useEffect(()=>{
    loopFun();
  }, []);

  return (
    <div className='titles'>
      {colors.map((color, i) => (
        <p key={i} className={'title-'+i}>{color}</p>
      ))}
    </div>
  );
}

Upvotes: 6

Clarity
Clarity

Reputation: 10873

I'm not quite sure why you need an extra function to loop over all the elements, if you're already doing that in map. Plus calling loopFun in render like that is a bad practice and will mostly likely cause infinite loop errors at some point, e.g. if you're dynamically modifying the number of colors.

Instead you can add the class you need when mapping over colors:

return (
    <div className="titles">
      {colors.map((color, i) => {
        const itemClass = `title${i} selected`;
        return (
          <p key={i} className={itemClass}>
            {color}
          </p>
        );
      })}
    </div>
  );

I'd also suggest looking into classnames library, which makes manipulating class names in React easier.

Upvotes: 0

Related Questions