I'm facing the following problem, I created a site using only the materialize and then I used the React library in the template, however now some fields are not working and one of them is the input I had to remove the jquery in some parts because I saw in some forums it is not recommended to use jquery next to the react. Below is the code for the input and an image showing what happened when I try to type something in the input.
render() {
const { open } = this.state;
return (
<Modal open={open} onClose={this.handleCloseModal} center styles={this.state.styles}>
<form method="" action="">
<div className="row">
<h5>Solicitar ligação</h5>
</div>
<div className="row">
<div className="input-field col s12 m12 l6 ">
<input onChange={this.handleChangeInput} value={this.state.form.name} name='name' type="text"/>
<label>Nome / Sobrenome</label>
</div>
<div className="input-field col col s12 m12 l6">
<input onChange={this.handleChangeInput} value={this.state.form.phone} name="phone" type="text"/>
<label>Telefone</label>
</div>
</div>
</form>
<div className="modal-footer">
<button onClick={this.handleSubmitForm} style={{ backgroundColor: this.props.theme.primary }} href="#" className="btn waves-effect btn modal-action" type="submit" name="action">Enviar</button>
</div>
</Modal>
);
}
And the image demonstrating what happened, note that when I type my name the label does not go up.