add and remove classes to input?

[arendu-zz]

Hi,
I am trying to make an autosuggest component for a quiz activity. One of the requirements is to show when a selected suggestion is the correct answer or not. I want to show this by changing the background-color of the input field.

I want to do this by adding and removing css classes to the input. I understand the default classname is react-autosuggest__input. Is there a way to dynamically add/remove new classes? I want to add a wrong class or a correct class depending on the answer selected.

I am trying to do this via renderInputComponent feature kind of like this (but it does not work):

    render() {
      const {
        value,
        suggestions
      } = this.state;
      const inputProps = {
        placeholder: "Guess",
        value,
        onChange: this.onChange,
        onKeyUp: this.onKeyUp
      };

      const renderInputComponent = inputProps => (
        <div>
          <input className={this.state.classes.join(' ')}  {...inputProps}/>
        </div>
      );

      return (
        <Autosuggest
          suggestions={suggestions}
          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
          onSuggestionSelected={this.onSuggestionSelected}
          getSuggestionValue={getSuggestionValue}
          renderSuggestion={renderSuggestion}
          renderInputComponent={renderInputComponent}
          inputProps={inputProps} />
      );
    }

Any suggestion on how to accomplish this?

[MitchTalmadge]

You have to remove className from the inputProps.

Like this:

const renderInputComponent = inputProps => {

    delete inputProps.className;
    
    return (
        <div>
            <input className={this.state.classes.join(' ')}  {...inputProps}/>
        </div>
    );
};

Or you can add your classes into the inputProps.className field if you still want to keep the theme classes from Autosuggest.