this.setState is not a function but should be within scope

Question

Given my component, when I try to change an input I get the error "this.setState() is not a function." As far as I can tell, it's within scope, so I'm not sure why it cant find it. I tried binding the function within the constructor, but it yielded the same results.

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';

class UpdateTab extends Component {
    constructor(props) {
        super(props);
        const {settings} = this.props;

        this.state = {
            version_text: "",
            version_description: "",
            accepted: [],
            post_changes_to_comments: settings.post_changes_to_comments,
        };
    }

    componentDidMount(){
        const {settings} = this.props;
        this.setState = ({
            post_changes_to_comments: settings.post_changes_to_comments,
        });
    }

    handleInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;
        this.setState({
            [name]: value
        });
    }

    handleSubmit(e){
        console.log("working");
        e.preventDefault();
        const values = {
            version_number: this.state.version_text,
            version_description: this.state.version_description,
            file: this.state.accepted

        };
        this.props.saveUpdate(values)
    }


    render() {
        const placeholder = "This section is to highlight the changes in the updated \n" +
            "version of the document.\n" +
            "\n" +
            "This will appear in the comment section unless disabled within the “Edit” tab.";
        return (
            <div className="settings-panel">
                <form>
                    <table>
                        <tbody>
                            <tr>
                                <td>Version Number</td>
                                <td rowSpan={4}>                                        
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input value={this.state.version_text}
                                           onChange={(e) => this.handleInputChange(e)}
                                           name="version_text"
                                           placeholder="eg. 1.0"/>
                                </td>
                            </tr>
                            <tr>
                                <td>Description of Changes</td>
                            </tr>
                            <tr>
                                <td>
                                    <textarea value={this.state.version_description}
                                              className="description-of-changes-textarea"
                                              onChange={(e) => this.handleInputChange(e)}
                                              name="version_description"
                                              placeholder={placeholder}/>
                                </td>
                            </tr>
                        <tr>
                            <td>
                                <input name="post_changes_to_comments"
                                       type="checkbox"
                                       checked={!this.state.post_changes_to_comments}
                                       onChange={(e) => this.handleInputChange(e)}/>
                                <label htmlFor="post_changes_to_comments">Do not display this description of changes in SRD comments</label>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <button className="button-filled center" onClick={(e) => this.handleSubmit(e)}>Update</button>


                </form>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        settings: state.settings,
    };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        saveUpdate: saveUpdate,
    }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(UpdateTab);

Any help as to why "this.setState" is not visible within my input change handler would be greatly appreciated.

Answer 1

Here

this.setState = ({
   post_changes_to_comments: settings.post_changes_to_comments,
});

You are overwriting setState. You know, move to

this.setState({
   post_changes_to_comments: settings.post_changes_to_comments,
});