Change className after mapping a list React.js

Question

I need some help with a class componenent in React .

I'm tring to change the class of the li after mapping the array 'list' . Could you please tell me how can I use the state in this case . When I click on the

the className should be equal to 'active'. I'm trying to use the state but I don't know how to make it .

I can do this without mapping the list vut i dont' want to repeat the code for each Composant .

Thank you very much for your help and I hope i will be understood

const list = ['Biographie', 'CV', 'Blog'];
    
    class Navbar extends Component {
      state = {
        Biographie: true,
        CV: false,
        Blog: false,
      };
    
      show = (e) => {
        list.map(item=> this.setState ({ [item]: false}))   
        this.setState({ [e.target.id]: true });
      };
    
      render() {
                   
        return (
          <div className="navbar">
            <ul className="list">
              {list.map((item) => (
                <li
                  onClick={this.show}
                  id={item}
                  className={this.state ? 'active' : ''} // How can I change class when state = true ?
                >
                  {' '}
                  {item}
                </li>
              ))}
            </ul>
            <Biographie info={this.state.Biographie} />
            <CV info={this.state.CV} />
            <Blog info={this.state.Blog} />
          </div>
        );
      }
    }

Fide · Accepted Answer · 2020-12-26 07:41:00Z

1

Is it necessary to have state as Object? If not, then simplify, let's have state only as string...

state = null

const show = (e) => { this.setState(e.target.id) }

...

className={this.state === item ? 'active' : ''}

answered Dec 26, 2020 at 7:41

Fide

1,1978 silver badges9 bronze badges

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

Comments

kennyvh · Accepted Answer · 2020-12-26 07:37:19Z

0

Access your state's properties using bracket notation.

{list.map((item) => (
    <li
        onClick={this.show}
        id={item}
        className={this.state[item] ? 'active' : ''}
    >
        {' '}
        {item}
    </li>
))}

answered Dec 26, 2020 at 7:37

kennyvh

2,8641 gold badge21 silver badges28 bronze badges

Comments

Adithya · Accepted Answer · 2020-12-26 07:43:35Z

0

Since you are setting the id in state inside show,

you can do

className={this.state[item]  ? 'active' : ''}

If you are planing on having only one active element, I suggest that you use something like this instead

  state = {
    active:"Biographie"
  };

and

{list.map((item) => (
  <li
    onClick={()=>setState({active:"item"})}
    id={item}
    className={this.state.active === item ? 'active' : ''}
  >
    {item}
  </li>
))}

edited Dec 26, 2020 at 7:43

answered Dec 26, 2020 at 7:36

Adithya

1,7281 gold badge11 silver badges18 bronze badges

Comments

Adel Kaced · Accepted Answer · 2020-12-26 19:16:11Z

0

Thank you all for your answer . It is much better know :)

Thanks to you I manage to show the component but there is probably a better way Once again I repeat myself and I don't like it :) .

My code below :

{this.state.active === 'Biographie' && 
    <Biographie />} 
    {this.state.active === 'CV' && 
    <CV info={this.state.active} />}
    {this.state.active === 'Blog' && 
    <Blog info={this.state.active} /> }

answered Dec 26, 2020 at 19:16

Adel Kaced

11 bronze badge

Collectives™ on Stack Overflow

Change className after mapping a list React.js

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related