How to prevent to add Null to className in if-statement

Question

I create the ReactJS application, where I want to mark the max (green) and min (red) skill values for each profile.
Each span with a value has an initial class of "skill-value".
When I define the max and min values, I add "red" and "green" classes for span with the max and min values.
My code works, but for a value that is not equal to max or min, the class "null" is added. If I don't return null, it shows "undefined".

How can I improve my code so that all other values (except min and max) have only the initial class?

let skillset = { a: 4, b: 2, c: 2, d: 6 }

class Main extends React.Component {
  render() {
    let arr = Object.values(this.props.skillset)
    let minVal = Math.min(...arr)
    let maxVal = Math.max(...arr)

    const checkVal = (val) => {
      if (val === maxVal) { return 'green' }
      if (val === minVal) { return 'red' }
      return null
    }
    return (
      {
        Object.keys(this.props.skillset).map((skill) => {
          return (
            <div className='skill' key={skill}>
              <span className={`skill-values ${checkVal(this.props.skillset[skill])}`}>
                {this.props.skillset[skill]}</span>
            </div>
          )
        })
      }
    )
  }
}

Answer 1

You could filter and concatenate them:

const classList = (...list) => list.filter(v => v).join(' ');
...

render() {
  const { skillset } = this.props;
  ...
  const checkVal = (val) => (
    (val === maxVal && 'green') ||
    (val === minVal && 'red')
  );
  ...
  return (
    ...
      <span className={classList('skill-values', checkVal(skillset[skill]))}>