How to add className to list from map array depending on object value

Question

I am trying to add className value to list items. I map through an array of objects, and depending on the value of 'name' in the object, a differenct class would be added.

Specifically, I am trying to make a message app, if the user is 'You', the message would have class 'right' and the message is shown on the rihgt of the screen. If the user name != 'You', then the className 'left' should be given.

I've tried adding an if statement within the render part of the code, and also within the sendMessage() function to add the class when pushing the message into the array (before it is even shown on the screen). All I get are syntax errors. Please advise...

import React, { Component } from 'react';

class LandingPage extends Component {
  constructor(props) {
    // When you pass props to super, the props get assigned to 'this'
    super(props);
    // this.state is the buildiing block of the data that gets used
    this.state = {
      message: '',
      name: '',
      list: []
    }
  }

  updateInput(key, value) {
    // update react state with input data
    this.setState({
      [key]: value
    })
  }

  sendMessage() {
    const newMessage = {
      message: this.state.newMessage,
      name: 'You'
    }

    const list = [...this.state.list];

    list.push(newMessage);

    this.setState({
      list,
      newMessage: ''
    })
  }

  render() {
    return <div className='container'>

      {/* messages will be listed here */}
      <div className='messagesDiv'>
        <ul>
          {/* List array is mapped through*/}
          {this.state.list.map(item => {
            return (
              <li className={item.class}>
                {item.name}: {item.message}
              </li>
            )
          })}
        </ul>
      </div>

      {/* message text area and send button here  */}
      <div className='inputDiv'>
        <form>
          <input type='text' className='input'
            value={this.message}
            onChange={e => this.updateInput('newMessage', e.target.value)}
          />
          <button className='btn btn-primary'
            onClick={() => this.sendMessage()}>Send</button>
        </form>
      </div>

    </div>
  }
}
export default LandingPage;

So above where it has {item.class}, this should either be 'right' or 'left'.

I've left just the code I think you'd need to see to diagnose my problem/ offer a solution.

Thanks.

I tried adding an if statement in within the 'return' of the component and also in the sendMessage function. I get red lines all over the code, includes message of unresachable code detected, expression expected, etc. Nothing that crashes or blocks compilation of the app on local server, but no positive result. — jesusWalks
– jesusWalks, Commented Nov 13, 2019 at 9:49

UnclePetros · Accepted Answer · 2019-11-13 09:55:55Z

3

You could use a simple function like this:

function userToClass(user){
   var userClass = '';
   if(user === 'You') {
      userClass = 'left';
   }
   else 
      userClass = 'right';
   }

   return userClass ;
}

and then use it like this:

return (
          <li className={userToClass(item.name)}>
            {item.name}: {item.message}
          </li>
        )

answered Nov 13, 2019 at 9:55

UnclePetros

18510 bronze badges

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

3 Comments

jesusWalks Over a year ago

Excellent. A correct answer. Thank you.I was trying so hard to get this logic within the code but that was wrong. Your solution is simple but effective - I wish I though of it!

UnclePetros Over a year ago

If you want a shorter code you can use ternary operator directly in your className attribute like this: className = {(item.name === 'you' ? 'left' : 'right ')}

jesusWalks Over a year ago

That's even better. Thank you.

gitfudge · Accepted Answer · 2019-11-13 10:06:54Z

2

Just adding a simple ternary operator will do the trick. Have a look at the example below -

{this.state.list.map(item => {
  return (
    <li className={item.name === 'You' ? 'float-left' : 'float-right'}>
      {item.name}: {item.message}
    </li>
  )
})}

answered Nov 13, 2019 at 10:06

gitfudge

5304 silver badges11 bronze badges

Comments

Moshiour · Accepted Answer · 2019-11-13 09:47:01Z

0

let's assume you have a set of classes derived from your business logic, in that case, it's pretty simple.

<MyComponent className={React.addons.classSet(classes)} />;

or you can do

 <MyComponent className={classNames.join(' ')} />;

edited Nov 13, 2019 at 9:47

answered Nov 13, 2019 at 9:44

Moshiour

6737 silver badges21 bronze badges

4 Comments

jesusWalks Over a year ago

But the list will have an either/or, depending on the value of 'name' within the object being printed on the screen

Moshiour Over a year ago

then you can create that array of classes before applying it into the component.

jesusWalks Over a year ago

But that still leaves the question of where to put the if statement, or how how to assign one of two potential classes to a dynamically produced list element. How?

Moshiour Over a year ago

create a function that will return the list of classes ses based on your logic. Reac.addons.classSet(yourFunction(params))

Elisei Nicolae · Accepted Answer · 2021-12-31 07:12:26Z

0

In NextJs you can try like this:

{popup_links.map((link, i) =>(
            <a
              key={link.title + i}
              href={link.href}
              className={`${styles.button} ${styles[link.customClassName]}`}
              onClick={(e) => {
                // your data
              }}
            >
              {link.title}
            </a>
          ))}

and link.customClassName is your custom class from json.

answered Dec 31, 2021 at 7:12

Elisei Nicolae

3523 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to add className to list from map array depending on object value

4 Answers 4

3 Comments

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related