I am new in Reactjs and I want to hide the materialize progressBar, but there's an error which is thrown. So am wondering if the approach am using is not the correct one. Is there another way of hiding this component. Below is the snapshot of the error:
If I try to use getElementById I get this error below, so what should I use:
This is the code am using :
componentDidMount() {
console.log('Parent did mount.');
document.getElementById('text_message').style.visibility = "hidden";
document.getElementsByName('progress_Bar').style.display ="none";
}
render() {
return (
<div>
<Card className="card-effects right">
<ProgressBar id="progress_Bar" name="progress_Bar"/>
<form className="card-form-signup" onSubmit={this.handleSubmit}>
<Row>
<label className="signup-header"><b>Signup to Authors Haven</b></label>
</Row>
<Row>
<Input s={12} placeholder="Username" name="username" value={this.state.username} onChange={this.handleChange} validate>
<Icon className="icon-styles">account_box</Icon></Input>
</Row>
<Row>
<Input s={12} type='email' name="email" value={this.state.email} onChange={this.handleChange} placeholder="Email" validate><Icon className="green darken-4">email</Icon></Input>
</Row>
<Row>
<Input s={12} type='password' name="password" placeholder="Password" value={this.state.password} onChange={this.handleChange} validate>
<Icon className="icon-styles">vpn_key</Icon></Input>
</Row>
<Row>
<Input s={12} type='password' name="confirm_password" placeholder="Confirm password" value={this.state.confirm_password} onChange={this.handleChange} validate>
<Icon className="icon-styles">vpn_key</Icon></Input>
</Row>
<Row>
<label >Already have an account ? </label>
</Row>
<Row>
<Button className='button-effects' type="submit" value="Submit" > Sign up </Button>
</Row>
<Row>
<label className="text-message" id="text_message" name="text_message"><i>text message</i></label>
</Row>
</form>
</Card>
</div>
);
}
The React approach would be to set a state visible and render the bar only when the state is true. set the state on false when component did mount.
You should try to avoid to manipulate the DOM elements after rendering when using React.
constructor(props) {
super(props);
this.state = {
visible: true
}
}
componentDidMount() {
console.log('Parent did mount.');
document.getElementById('text_message').style.visibility = "hidden";
this.setState({visible: false});
}
render() {
const isVisible = this.state.visible;
return (
<div>
<Card className="card-effects right">
{isVisible && <ProgressBar id="progress_Bar" name="progress_Bar"/>}
<form className="card-form-signup" onSubmit={this.handleSubmit}>
<Row>
<label className="signup-header"><b>Signup to Authors Haven</b></label>
</Row>
<Row>
<Input s={12} placeholder="Username" name="username" value={this.state.username} onChange={this.handleChange} validate>
<Icon className="icon-styles">account_box</Icon></Input>
</Row>
<Row>
<Input s={12} type='email' name="email" value={this.state.email} onChange={this.handleChange} placeholder="Email" validate><Icon className="green darken-4">email</Icon></Input>
</Row>
<Row>
<Input s={12} type='password' name="password" placeholder="Password" value={this.state.password} onChange={this.handleChange} validate>
<Icon className="icon-styles">vpn_key</Icon></Input>
</Row>
<Row>
<Input s={12} type='password' name="confirm_password" placeholder="Confirm password" value={this.state.confirm_password} onChange={this.handleChange} validate>
<Icon className="icon-styles">vpn_key</Icon></Input>
</Row>
<Row>
<label >Already have an account ? </label>
</Row>
<Row>
<Button className='button-effects' type="submit" value="Submit" > Sign up </Button>
</Row>
<Row>
<label className="text-message" id="text_message" name="text_message"><i>text message</i></label>
</Row>
</form>
</Card>
</div>
);
}