mue/src/components/modals/main/settings/Text.jsx

import React from 'react';

import { toast } from 'react-toastify';

export default class Text extends React.PureComponent {
  constructor(...args) {
    super(...args);
    this.state = {
      value: localStorage.getItem(this.props.name) || ''
    };
    this.language = window.language.modals.main.settings;
  }

  handleChange(value) {
    // Alex wanted font to work with montserrat and Montserrat, so I made it work
    if (this.props.upperCaseFirst === true) {
      value = value.charAt(0).toUpperCase() + value.slice(1);
    }

    localStorage.setItem(this.props.name, value);
    this.setState({
      value: value
    });
  }

  resetItem() {
    localStorage.setItem(this.props.name, this.props.default || '');
    this.setState({
      value: this.props.default || ''
    });

    toast(this.language.toasts.reset);
  }

  render() {
    return (
      <>
        <p>{this.props.title} <span className='modalLink' onClick={() => this.resetItem()}>{this.language.buttons.reset}</span></p>
        {(this.props.textarea === true) ? 
           <textarea className='settingsTextarea' value={this.state.value} onChange={(e) => this.handleChange(e.target.value)}/>
          :<input type='text' value={this.state.value} onChange={(e) => this.handleChange(e.target.value)}/>
        }
      </>
    );
  }
}