react-materialize: material_select is not a function

Followed doc for installation:

<script type="text/javascript"
        src="https://www.gstatic.com/charts/loader.js"></script>
<script src="bundle.js"
        type="text/javascript"></script>

</body>

Trying to use Select in jsx, error material_select is not a function:

import React from 'react';
import { Button, Card, Row, Col, Input } from 'react-materialize';
....

return (
<Row>
	<Input s={12} type='select' label="Materialize Select" defaultValue='2'>
		<option value='1'>Option 1</option>
		<option value='2'>Option 2</option>
		<option value='3'>Option 3</option>
	</Input>
</Row>
)

Help.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 2
Comments: 15 (6 by maintainers)

Most upvoted comments

So to fully make this work:

Make sure there is no Bootstrap loaded.
in main.js,

import 'materialize-css/dist/js/materialize.min.js'
import 'materialize-css/dist/css/materialize.min.css'

in your.js,

import $ from 'jquery' //this one is not needed if your eslint is disabled
import { Button, Card, Row, Col, Input, Modal, Icon } from 'react-materialize';

fengxia41103 on Sep 22, 2017

If you are using latest version´s Materialize, you should change in your js.

/*older $(‘select’).material_select(); $(‘#select’).material_select(); */ /newer/ $(‘select’).formSelect();

alvaradovex on Jun 7, 2018