Creating a class inside map function not working

JavaScript
#1

Hi there. I am trying to do a Javascript Calculator with React. First I thought to create an array with necessary keys (I yet have to update the keyCodes, don´t worry about that)

const keys = [
  {
    text: 'AC',
    key: 8
  },
  {
    text: '/',
    key: 87
  },
  {
    text: 'x',
    key: 69
  },
  {
    text: '7',
    key: 65
  },
  {
    text: '8',
    key: 83
  },
  {
    text: '9',
    key: 68
  },
  {
    text: '-',
    key: 90
  },
  {
    text: '4',
    key: 88
  },
  {
    text: '5',
    key: 67
  },
  {
    text: '6',
    key: 67
  },
  {
    text: '+',
    key: 67
  },
  {
    text: '1',
    key: 67
  },
  {
    text: '2',
    key: 67
  },
  {
    text: '3',
    key: 67
  },
  {
    text: '=',
    key: 67
  },
  {
    text: '0',
    key: 67
  },
  {
    text: '.',
    key: 67
  }
];

So I use map function to create a button for each key. But also I want inside the map function to create a class for each button, each of one of them must be different (keye1, keye2, keye3…etc) so later I can access those ones to modify styling in some of them

const Display = props => {
  return (
    <h1>{props.actual}</h1>
  );
};

class Calculator extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      displayC: 0
    }
  }
  render(){
    return (<div id="contain-cal">
        <Display actual={this.state.displayC} />
         <div id="grid-keys">
          {keys.map((btn,i) => (
            <button className={`keye+${i}`}
                    onClick={this.handleClick}
                    keycode={btn.key}>
                  {btn.text}
             </button> 
          ))      
          }
        </div>
      </div>)
  }
}

ReactDOM.render(<Calculator />, document.getElementById('app'))

However when I apply this to see if the map function has created the classes succesfully:

.keye7{
  background-color: yellow;
}

None of the buttons turns yellow…:roll_eyes:

This is my full code: https://codepen.io/Assblack/pen/XwzJZp

#2

You either use template literals or concatenate a sting.
As it is, the output will be

keye+0
keye+1
keye+2
[...]

Switching to

className={`keye${i}`}

will do the trick :+1:

2 Likes
#3

lol such dum mistake. thanks

#4