I'm getting an error of "TypeError: Object(...) is not a function" on "ClientApp/node_modules/semantic-ui-react/dist/es/modules/Dropdown/Dropdown.js line 81" when I try to create a new instance of the Semantic UI React dropdown in my react application. I have even copied the code over, only changing variable names, from a project that a colleague worked on, and neither of us can seem to determine the source of the error.

I have tried following the guides on semantics website to no avail. I have copied the code with the includes from a working and existing project.

handleSelectClub = (e, data) => {
        const club = this.state.clubList[data.value];

        this.setState({
            clubId: club.id,
            name: club.name
        });
    }
render() {
        var clubs;
        let selectClub = null;
        if (this.state.clubList.length > 0)
        {
            clubs = this.state.clubList.map((opt, i) => ({
                key: opt.id,
                text: opt.name,
                value: i
            }));
            selectClub =
                <div>
                    <div className="form-group">
                        <Dropdown placeholder='Search Clubs' search selection options={clubs} onChange={this.handleSelectClub} />
                    </div>
                </div>
        }
        return (
            <form className="club-add-form" onSubmit={this.handleSubmit}>
                <h1>Add a New Club</h1>
                {selectClub}
            </form>
        );
    }

I just want the dropdown to be part of a pretty basic form for adding an entry to a database.

1 Answers

0
Leo On Best Solutions

I managed to reproduce this error in 0.87.1 of Semantic UI, I downgraded to 0.84 and the issue is not there.

Hope it helps.