LetterInput with added characters

Form.js

function Icon({ i, char, reverse = false }) {
  const padding = Array.from({ length: i }, (_, i) => (
    <span key={i}>&nbsp;</span>
  ))
  return reverse ? [char, ...padding] : [...padding, char]
}

function Happy({ i }) {
  return <Icon i={i} char="ᕕ( ᐛ )ᕗ" />
}

function Neutral({ i }) {
  return <Icon i={i} reverse={true} char="¯_(ツ)_/¯" />
}

function Sad({ i }) {
  return <Icon i={i} char="¯_(☯෴☯)_/¯" />
}

function Dead({ i }) {
  return <Icon i={i} reverse={true} char="(✖╭╮✖)" />
}
  
       //...Inside the render method of <FormInput/>
      <span style={{ float: "right", width: "50%" }}>
        {len < MAX_LENGTH / 4 ? (
          <Happy i={len} />
        ) : len < MAX_LENGTH / 2 ? (
          <Neutral i={len} />
        ) : len < (3 * MAX_LENGTH) / 4 ? (
          <Sad i={len} />
        ) : (
          <Dead i={len} />
        )}
      </span>