ComponentDidMount not working - reactjs

Question

I am adding a user via phone number.
The submit button is disabled until all 10 digits are entered, that works fine. When I click the submit button and try to add a new user with a different phone number, the submit button is enabled until I hit the first key then the button becomes disabled again until the rest of the 9 digits are entered into the field.
When I tried to create a componentDidMount function the app completely breaks. Here is a bit of my code:
import React from 'react'
import { Dialog, Button, TextField } from 'material-ui'
import { connect } from 'react-redux'
import { inviteAdminByPhone } from '../db'
import MaskedInput from 'react-text-mask'
import { phoneNumber } from '../masks'
import SpinnerButton from '../components/spinner-button'
import { CircularProgress } from 'material-ui/Progress'
const byId = id => document.getElementById(id)
class AddManagerModal extends React.Component {
state = {
disabled: true,
phone: ''
}
componentDidUpdate() {
if ({ disabled: false && this.state.phone < 10 }) {
this.checkPhoneFields()
}
}
handleChange = (name, id) => {
this.setState({
[name]: document.getElementById(id).value
})
}
PhoneMask = () => {
return (
<MaskedInput
mask={phoneNumber}
placeholderChar={'\u2000'}
placeholder="Phone Number"
id="add-manager-phone"
className="masked-input"
onChange={e => {
this.handleChange('phone', 'add-manager-phone')
console.log(e.target.value)
if (e.target.value.replace(/[(.)\s]/g, '').length === 10) {
this.setState({ disabled: false })
} else {
this.setState({ disabled: true })
}
}}
/>
)
}
handleOpen = () => {
this.props.dispatch({
type: 'ADD_MANAGER_MODAL',
payload: !this.props.open
})
}
checkPhoneFields = () => {
if (byId('login-phone').value.replace(/[(.)\s]/g, '').length === 10) {
this.setState({ disabled: false })
return
}
this.setState({ disabled: true })
}
render() {
const props = this.props
const show = props.show
const phone = this.state.phone
return (
<div>
<Dialog open={props.open} onBackdropClick={() => this.handleOpen()}>
<div className="dialog-padding max-width-300">
<h3 className="oswald font-light tal mb0">Managers Phone Number</h3>
<TextField
value={phone}
fullWidth
className="max-width-250"`enter code here`
InputProps={{ inputComponent: this.PhoneMask }}
/>
</div>
<div className="dialog-padding tar">
<Button
variant="flat"
color="secondary"
onClick={() => this.handleOpen()}
>
Cancel
</Button>
<SpinnerButton
id="invite-new-manager"
variant="raised"
color="primary"
disabled={this.state.disabled}
onClick={() =>
props.addAdmin(
byId('add-manager-phone').value,
show.eid,
'invite-new-manager'
)
}
label="Invite"
/>
</div>
</Dialog>
</div>
)
}
}
const mapStateToProps = state => {
return {
open: state.addManagerModal,
show: state.show
}
}
const mapActionToProps = dispatch => {
return {
dispatch,
addAdmin: (number, event_id, id) =>
dispatch(inviteAdminByPhone(number, event_id, id))
}
}
const connector = connect(mapStateToProps, mapActionToProps)
export default connector(AddManagerModal)

Answer 1

I think you need to initialize your state in a constructor. This will always initialize the state before any of the lifecycle methods are called. You shouldn't need the componentDidMount call then.

Answer 2

Propably you're getting this error, because byId cannot find requested element (with id "login-phone") and returns null.
Change condition in componentDidUpdate, because object is resolved to true when it's converted to boolean.
if ({}){
console.log("Condition satisfied");
}
if ({disabled: false}){
console.log("This one too");
}
I think you need something like:
componentDidUpdate()
{
if (!this.state.disabled && this.state.phone < 10 )
{
this.checkPhoneFields()
}
}
or (in case when this.state.phone is string and you need to check its length):
componentDidUpdate()
{
if (!this.state.disabled && this.state.phone && this.state.phone.length < 10 )
{
this.checkPhoneFields()
}
}

Answer 3

It seems like disabled variable doesn't exist. Should it be this.state.disabled? Because I saw you declare one in the constructor.
componentDidUpdate()
{
if ({ disabled: false && this.state.phone < 10 })
{
this.checkPhoneFields()
}
}