Отправить аргумент в setState помимо prevState и props?

Question

У меня есть компонент, который вызывает функцию addOption, которая определена в его родительском компоненте. Функция имеет параметр option, который берется из поля формы. Функция addOption принимает аргумент и объединяет его с массивом параметров в setState. Все это работает нормально, но я действительно хочу, чтобы функция вызывалась setState вне компонента, чтобы ее можно было протестировать и сопоставить с другими функциями в классе, но я не могу понять, как передать аргумент option в setState .

class AddOption extends React.Component<IProps> {

onFormSubmit = (e: any) => {
    e.preventDefault();
    const option = e.target.elements.option.value.trim();
    const error = this.props.addOption(option);
}

render() {
    return (
        <div>
            <form onSubmit={this.onFormSubmit}>
                <input type="text" name="option" />
                <button>Add Option</button>
            </form>
        </div>
    );
}
}

Parent

const deleteOptions = () => ({ options: [] as string[] })

class IndecisionApp extends React.Component<object, State> {
    readonly state: State = initialState;
    render() {
        const { title, subtitle, options } = this.state;
        return (
            <div>
                <Header title={title} subtitle={subtitle} />
                <Action
                    hasOptions={options.length > 0}
                    onClick={this.handlePickOption}
                />
                <Options
                    onClick={this.handleDeleteOptions}
                    options={options} />
                <AddOption
                    addOption={this.handleAddOption}
                />
            </div>
        );
    }

    handleDeleteOptions = () => this.setState(deleteOptions);
    handlePickOption = () => {
        const randomNum = Math.floor(this.state.options.length * Math.random());
        const option = this.state.options[randomNum];
        alert(option);
    }

    handleAddOption = (option: string) => {
        if (!option) {
            return "Enter a valid option";
        } else if (this.state.options.indexOf(option) > -1) {
            return "Enter a unique option";
        }

        this.setState((prevState: State) => {
            return {
                options: prevState.options.concat(option)
            }
        });
    }
}

Я действительно хочу, чтобы handleAddOption больше напоминал deleteOption, где он объявлен вне компонента IndecisionApp, но я не знаю, как передать 'option' для setState из handleAddOption.

GitHub - index.tsx

Answer 1

Я разобрался.

Внутри компонента

handleAddOption = (option: string) => {
    if (!option) {
        return "Enter a valid option";
    } else if (this.state.options.indexOf(option) > -1) {
        return "Enter a unique option";
    }

    this.setState(prevState => appOption(prevState, option));
}

Вне компонента.

const appOption = (prevState: State, option: string) => {
    return {
        options: prevState.options.concat(option)
    }
}